对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？