通过svg组件循环d3

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-事件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类恰好是你想要的元素。

有如果您已经从创建rects 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 
});