d3.js onclickイベントは、描画時ではなくクリック時に変数の値を使用します。

Question

d3.jsを使用してSVGコンテナに一連の円を描画しています。 私はeventListです。このリストの各要素について、私は円を描きます。ここで私はそれをやっている。動作します：

var eventList = [ 
    Object {stateId: 5}, 
    Object {stateId: 6}, 
    Object {stateId: 7}, 
]; 
for (var i = 0; i <= eventList.length-1; i++) { 
    var currEvent = eventList[i]; 

    var myCircle = self.svgContainer.append("circle") 
    .attr("cx", i * 100) 
    .attr("cy", i * 100) 
    .attr("r", 5) 
    .attr("stroke-width", 0) 
    .attr("fill", "red"); 
} 

これらの各サークルにクリック時の動作を追加しようとしています。各サークルをクリックして、eventListにあるデータに基づいて特定のURLに移動します。上記のループに私が追加しているのは、次のとおりです。

myCircle.on({ 
     "click": function() { 
      console.log("Hello! currEvent.stateId=", currEvent.stateId.toString()); 
      console.log("currEvent = ", currEvent); 
      $state.go('myState', { 
       'stateId': currEvent.stateId 
      } 
     ); 
     } 
     } 
    ); 

私の理解では、これはうまくいくはずです。しかし、それはしません。どのようなサークルをクリックするとonclickコードが実行されます。その時点で、常に最後の値であるcurrentEvent.stateId - の値が出力されます。。つまり、すべてのサークルをクリックするだけで、同じURLに移動します。これは、最後のサークルをクリックしたときに発生します。

クリックが実際に発生したときではなく、その円が描画されたときにonclickコードがcurrentEventの値を使用するようにするにはどうすればよいですか？これは私の大きな問題です。

Answer 1

問題は、変数currEventがあなたの問題である最後の値を持つクリックイベントを実行しているときです。

正しいアプローチは、データをサークルにバインドすることです。

var myCircle = svg.selectAll(".dots") 
.data(eventList).enter().append("circle")//make as many circle as their are events in the eventList. This will bind the data to the circle. 
    .attr("class", "dots")//set a class to circle for selection to work 
    .attr("cx", function(d, i) { 
    return (i * 100) 
    }) 
    .attr("cy", function(d, i) { 
    return (i * 100) 
    }) 
    .attr("r", 5) 
    .attr("stroke-width", 0) 
    .attr("fill", "red"); 

すべてのサークルにclickイベントを登録します。

myCircle.on({ 
    "click": function(d) { 
    //here d will give the bound object 
    console.log("Hello! currEvent.stateId=", d.stateId.toString()); 
    console.log("currEvent = ", d); 
    } 
}); 

作業コードhere