d3.jsを使用してSVGコンテナに一連の円を描画しています。 私はeventList
です。このリストの各要素について、私は円を描きます。ここで私はそれをやっている。動作します:d3.js onclickイベントは、描画時ではなくクリック時に変数の値を使用します。
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の値を使用するようにするにはどうすればよいですか?これは私の大きな問題です。
私はeventListを表示するために私の質問を更新しましたあなたの 'eventList'変数 – iulian
の構造を示してください。 –
このコードは 'myCircle.on({'もforループ内にありますので、クリックイベントが発生したときに 'currEvent'変数に最後の値が保持されるようにしてください) これはデータを円で登録する方法ではありません。データを入力してデータをバインドする必要があります。 – Cyril