d3.js onclick-Ereignis verwendet den Wert der Variablen zum Zeitpunkt des Klicks statt zum Zeitpunkt der Zeichnung

Question

Ich zeichne eine Reihe von Kreisen auf einem SVG-Container mit d3.js. Ich habe eine eventList. Für jedes Element in dieser Liste zeichne ich einen Kreis. Hier ist, wie ich es mache. Es funktioniert:

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"); 
} 

ich jetzt versuchen, auf klicken, auf jedem dieser Kreise Verhalten hinzuzufügen. Ich möchte auf jeden Kreis klicken, um mich zu einer bestimmten URL zu bringen, die auf Daten basiert, die in der Ereignisliste gefunden werden. Hier ist, was ich in die Schleife oben hinzufügen:

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

Nach meinem Verständnis sollte dies funktionieren. Aber das tut es nicht. Was es tut, ist den Onclick-Code auszuführen, wenn ich auf einen der Kreise klicke. An diesem Punkt wird der Wert currentEvent.stateId - ausgegeben, der immer der letzte ist!. Das Klicken auf jeden Kreis bringt mich einfach zur selben URL - was nur passieren sollte, wenn man auf den letzten Kreis klickt.

Wie kann ich es so machen, dass der Onclick-Code den Wert von currentEvent zu dem Zeitpunkt verwendet, als dieser Kreis gezeichnet wurde, anstatt wenn der Klick tatsächlich ausgelöst wird? Das ist ein großes Problem für mich.

Answer 1

Das Problem ist, wenn Sie das Click-Ereignis ausführen, die Variable currEvent wird den letzten Wert haben, der Ihr Problem ist.

Der richtige Ansatz wäre, die Daten an den Kreis zu binden.

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"); 

Registrieren Sie jetzt Click-Ereignis in alle Kreise.

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

Code arbeiten here