Question

我想遍历图表中的所有数据列，并在数据列上使用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
            });
}

Answer 1

最简单的形式是：

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

这会抓取rect类的所有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
});

循环通过svg组件d3

1 个答案: