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进行了演示，使用两个圆圈第一个圆圈在3秒后出现，然后第二个在6秒后到来

全部工作代码here

希望这有助于！ :)