svg bileşenleri ile döngü d3

Question

Grafikteki tüm veri sütunlarına geçiş yapmak ve veri sütununda onclick olay listesini kullanmak istiyorum.

<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> 

svg bileşeni yüzden ile 4 .c3 olay-rect'in-0 döngü ve bu onclick EventListener eklemek istiyor. Birisi bana yönünü gösterebilirse, bu gerçekten yararlı olur.

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

Answer 1

en basit şekli olacaktır:

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

İstediğin unsurları olur rect.c3-event-rect sınıfıyla tüm rect unsurları çekecek.

zaten rects oluşturmasını d3 seçimini varsa sadece bunu yeniden kullanabilirsiniz:

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