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 - 的值，它始终是最后一个！。因此，点击每个圈子只会将我带到相同的网址 - 这应该只在点击最后一个圈子时发生。

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

Answer 1

问题是，当您执行click事件时，变量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");

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

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

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

1 个答案: