d3のイベントのdispatchについて以下の例で動作しない理由が理解できず質問しています。
以下の例では緑の要素にマウスオーバーするとサイズが変わり、resetボタンを押すことでresetイベントを発生させて元に戻す動作を期待しています。

(1)のdispatch.onは公式ドキュメントに書いてある方法そのままでこちらは動作しています。
https://github.com/mbostock/d3/wiki/Internals#d3_dispatch

(2)のように他の要素の生成中にイベントリスナを設定したいのですが、こちらは動作しません。

同じだと認識しているのですが、(2)の設定方法がうまく行かない理由か回避策をご教示ください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<html lang="ja">
<body>
</script>
 <script>
  var dataset = [11, 25, 45, 30, 33];
  var dispatch = d3.dispatch("reset");

                    //(1)
  dispatch.on("reset", function(d,i){
    console.log("onStart");
  });

  var svg = d3.select("body").append("svg")
   .attr({
    width: 160,
    height: 160
   });

  svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr({
    x: 0,
    y: function(d, i) {
     return i * 25;
    },
    width: 100,
    height: 20,
    fill: "green"
   })
   .on("mouseover", function() {
    d3.select(this)
     .attr({
      width: 50
     })
   })
   .on("reset", function() {               //(2)
    d3.select(this)
     .attr({
      width: 100
     })
   });

  function onButtonClick() {
   dispatch.reset();
   console.log("onButtonClick")
  }
 </script>
 <button onclick="onButtonClick()">reset</button>
</body>
</html>