Angularjs 遍历svg组件d3

我想循环查看图表中的所有数据列，并在数据列上使用onclick eventlistener。 svg组件

    <g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;">
<rect class=" c3-event-rect c3-event-rect-0" x="0" y="0" width="88" height="196"></rect>
    <rect class=" c3-event-rect c3-event-rect-1" x="88" y="0" width="88" height="196"></rect>
    <rect class=" c3-event-rect c3-event-rect-2" x="176" y="0" width="88" height="196"></rect>
    <rect class=" c3-event-rect c3-event-rect-3" x="263" y="0" width="88" height="196"></rect>
    <rect class=" c3-event-rect c3-event-rect-4" x="351" y="0" width="88" height="196"></rect></g> 

所以我想循环通过.c3-event-rect-0到4。并在其中添加onclick eventlistener。如果有人能告诉我方向，那将非常有帮助

for (k = 0; k < something.length; k++) {
       dcbar = d3.selectAll("rect.c3-event-rect"); 
            dcbar.on("click", function () {
                  something
            });
}

for（k=0；k

最简单的形式是：

d3.selectAll("rect.c3-event-rect")
  .on("click", function () {
    // handle the click
  });

这将使用

rect.c3 event rect

类获取所有

rect

元素，该类恰好是您想要的元素

如果您已经从创建矩形中选择了d3，您可以重用它：

var dcbar = d3.select(".c3-event-rects")
  .selectAll("rect")
  .data(data);

dcbar.enter()
  .append("rect")
  .attr("class", "c3-event-rect")
  // do setup for x, y, height, width, etc. here;

dcbar.on("click", function(d) {
  // handle the click
});

---

您已经标记了

angularjs

。您是否使用angular？您的代码是正确的，但您不需要

something

循环。它只需

d3.selectAll（“rect.c3 event rect”）.on（“click”，function（）{doSomethingAweseome（）}）是的，我正在使用angular js@inspired@Mark即使我想记录关于该数据列的信息，我也不需要循环遍历它吗？
d3.selectAll（“rect.c3 event rect”）
将为示例SVG中的所有rect（
c3-event-rect-1
to c3-event-rect-4`）分配一个单击处理程序。