D3 - как выбрать недавно добавленный элемент

Question

Я добавляю circles к сюжету, используя D3.js, круги должны быть добавлены с таймаутом (для анимации), поэтому я использую setTimeout.

Эти круги также должны иметь зарегистрированные mouseover и click обработчики событий, но я не могу выбрать недавно добавленный элемент для регистрации on прослушивателей.

Вот код:

(salesDataToPlot.graphObj.eventData).forEach(

     function(d,i){ 


       setTimeout(
        function(){ 
        console.log(d.collectTime); 

        svg.append("circle") 
         .transition() 
         .duration(1000) 

         .attr("cx", function() { 
         //console.log(new Date(d.collectTime.substr(0,10))); 
         return xScale(new Date(d.collectTime.substr(0,10))); 
         }) 
         .attr("cy", function() { 
         //console.log(d.value); 
         return yScale((d.value - min)/(max-min)); 
         }) 
         .attr("r", function() { 
         return 5; 
         }) 
         .attr("clip-path","url(#clip)") 
         .attr("class","circle") 
         //.attr("ng-class","{ 'graphClass':!chartData.graphObj.showEventMarkers }") 
         .style("fill", eventStrokeColor) 
         ; 
       }, 1000+ i*100); 
     }); 

Этот код добавляет круги с тайм-аут.

Теперь я не знаю, где и как добавить код для on слушателей, как

.on("mouseover", function(d) 
         { 
         tooltip.style("visibility", "visible"); 
         tooltip.style("background-color",eventStrokeColor); 
         tooltip.html("<div style='color:black'>" + d.eventType + "</div>" + d.eventSentence); 
         }) 

Answer 1

Вы можете добавить, что, когда вы клеть круг и добавить его в SVG что-то вроде этого:

var ci = svg.append("circle") 
        .transition() 
        .duration(1000) 
     .attr("fill", "aliceblue") 
     .attr("r", 50) 
     .attr("cx", cx) 
     .attr("cy", cy); 
ci 
     .on("mouseover", function() {//adding listeners 
     return tooltip.style("visibility", "visible"); 
    }) 
     .on("mousemove", function() { 
     return tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px"); 
    }) 
     .on("mouseout", function() { 
     return tooltip.style("visibility", "hidden"); 
    }); 

Я сделал демоверсию, используя setInterval с двумя кругами. 1-й круг поступает через 3 секунды, затем 2-й - через 6 секунд.

Полный рабочий код here

Надеюсь, это поможет! :)