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秒后出现

完整的工作代码这里

希望这可以帮助!:)