通過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 
});