19524


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

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

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

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

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-11-25T08:34:43.600
19285
2015-12-01T16:00:24.767
13045
question
javascript d3.js
d3.jsのdispatch.onで自作イベントのリスナを登録したい。


d3にはあまり詳しくないのですが、`selection.on()`はDOMのイベントを見張るもの、`dispatcher.on()`はカスタムイベントを見張るもので、同じ`on()`メソッドでも役割が異なるのではないですか？  
`rect`を変数に置いて、dispatcherでイベントをキャッチして`width`をリセットすればいいと思うのですがどうでしょうか。

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <body>
     <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
       });
    
      var rects = 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
         })
       });
                dispatch.on("reset", function() {               //(2)
        rects.attr({
         width: 100
        })
       });
    
      function onButtonClick() {
       dispatch.reset();
       console.log("onButtonClick")
      }
     </script>
     <button onclick="onButtonClick()">reset</button>
    </body>
[/code]


CC BY-SA 3.0
2015-12-01T16:00:24.767
19524
2015-12-01T16:00:24.767
8532
19285
answer