Question

以下是我的d3.js散点图的摘录。

svg.on("click", function() {
        d3.select("#tooltip_svg_01").classed("hidden", true);
   });
svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", function(d) {
        return xScale(d[x']);
   })
   .attr("cy", function(d) {
        return yScale(d['y']);
   })
   .attr("r", scatter_radius)
   .style("stoke", "gray")

   .on("mouseover", function(d) {
        console.log('mouseover: ' + d3.select(this));
        var xPosition = parseFloat(d3.select(this).attr("cx")) + scatter_radius;
        var yPosition = parseFloat(d3.select(this).attr("cy"));
        d3.select("#tooltip_svg_01")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")                     
            .select("#value_tt_01")
            .text(d['x'] + ',' + d['y']);

        d3.select(this).style("fill", 'red');
        //Show the tooltip
        d3.select("#tooltip_svg_01").classed("hidden", false);
   })
   .on("mouseout", function() {
        console.log('mouseout: ' + d3.select(this));
        d3.select("#tooltip_svg_01").transition().delay(30).attr("class", "hidden");
        d3.select(this).transition().delay(30).style("fill", "gray");
   })

mouseout事件尝试在工具提示消失之前延迟并且在圈回转之前的延迟不起作用。更改立即进行。如何在d3.js？

中完成此操作

Answer 1

我认为d3.select("#tooltip_svg_01").transition().delay(30)太快了。把它d3.select("#tooltip_svg_01").transition().delay(1000)

此外，对于淡化效果，不应用类，但应用这样的样式来隐藏

d3.select("#tooltip_svg_01").transition().delay(1000).style("opacity", 0)

要显示它，请执行：

d3.select("#tooltip_svg_01").transition().delay(1000).style("opacity", 1)

这个应该按预期工作：

d3.select(this).transition().delay(30).style("fill", "gray");

只是提供更长的延迟

d3.select(this).transition().delay(1000).style("fill", "gray");

希望这可以解决您的问题。

影响d3js mouseout事件的延迟转换

1 个答案: