loop through svg components 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-события-прямоугольник-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 класса, который случается быть элементы, которые вы хотели.

Если у вас уже есть выбор 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 
});