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

下面是我的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中如何做到这一点？
我认为
d3.select（“#tooltip_svg_01”）。transition（）。delay（30）
太快了。
将其设置为d3。选择（“#工具提示_svg_01”）.transition（）。延迟（1000）

此外，对于淡入淡出效果，不要应用类，而是应用这样的样式进行隐藏

d3.选择（“#工具提示_svg_01”）.transition（）.延迟（1000）.样式（“不透明度”，0）

要将其显示出来，请执行以下操作：

d3.选择（“#工具提示_svg_01”）.transition（）.延迟（1000）.样式（“不透明度”，1）

这一个应该像预期的那样工作：

d3.选择（this）.transition（）.delay（30）.样式（“填充”、“灰色”）

再晚一点就行了

d3.选择（this）.transition（）.delay（1000）.样式（“填充”、“灰色”）

希望这能解决您的问题。
30毫秒太快了，延迟1000毫秒谢谢。我应该反复检查我是在几秒钟内工作还是在几毫秒内工作。知道
opacity
是使用过渡时处理的首选样式非常有用。它不是首选样式…我把它放在那里是为了提供慢速隐藏效果。当您应用类时，它将立即应用，您将无法获得效果。