d3.js - 影响 d3js mouseout 事件的延迟转换

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("不透明度", 0)

为了显示它:

d3.select("#tooltip_svg_01").transition().delay(1000).style("不透明度", 1)

这个应该按预期工作:

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

就给个更高的延迟

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

希望这能解决您的问题。