Question

我使用D3.js将circles添加到绘图中，需要使用超时添加圆圈（用于动画目的），因此我使用的是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

希望这有帮助！：）

D3 - 如何选择最近添加的元素

1 个答案: