Javascript d3.js onclick事件在单击时使用变量值，而不是在绘制时使用变量值

我正在使用d3.js在SVG容器上绘制一组圆。 我有一个

事件列表

。对于列表中的每个元素，我都画一个圆。我是这样做的。它的工作原理是：

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

据我理解，这应该行得通。但事实并非如此。当我点击任何一个圆圈时，它会运行onclick代码。此时，它将打印出

currentEvent.stateId

--的值，该值始终是最后一个值。因此，点击每个圆圈只会把我带到同一个URL——这应该只发生在点击最后一个圆圈时

---

如何使onclick代码在绘制圆时使用currentEvent的值，而不是在实际触发单击时使用该值？这对我来说是个大问题。

问题是，当您执行click事件时，变量

current

将具有最后一个值，这是您的问题

正确的方法是将数据绑定到圆

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

现在将点击事件注册到所有圆圈

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

---

工作代码

请显示您的

事件列表

变量的结构我已更新我的问题以显示事件列表。我希望此代码

myCircle.on({

也在for循环内。现在，当触发click事件时，变量

current

将保留最后一个值。这不是用圆圈注册数据的方法。您应该使用

data

enter

创建圆圈并用它绑定数据。Cyril。谢谢。您能告诉我如何使用

data

输入

？我不知道。我只是看到了这个onclick代码并抓取了它，认为它应该可以工作。谢谢你的示例@Cyril！但我不确定这个方法是否适合我。我需要在循环中遍历事件列表，因为还有很多其他内容（在我的原始问题中没有显示）我需要在循环中为每个事件执行这些操作。例如，计算圆的X和Y值实际上比我解释的要复杂得多。我还需要根据这些X和Y坐标绘制一些线。你能告诉我如何使用for循环在

eventList

上进行迭代吗？如果你正在计算，好吗循环中的X和Y继续，并将X/Y值设置为eventlist。现在，当您使用

.data（eventlist）

创建圆时，请使用上面计算的值

.attr（“cx”，函数（d，i）{返回d.X；//这是计算出来的并存储在eventlist}）

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