CODEWITHSUNDEEP
d3.js
ChrisGuest
ChrisGuest

Reputation: 3608

Effecting delayed transitions on d3js mouseout events

Here is an excerpt from my d3.js scatter plot.

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");
   })

The attempts in the mouseout event to institutea delay before the tooltip disappears and a delay before the circle turns back are not working. The changes are made immediately. How can this be done in d3.js ?

Upvotes: 3

Views: 2005

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

I think d3.select("#tooltip_svg_01").transition().delay(30) is too fast. make it d3.select("#tooltip_svg_01").transition().delay(1000)

Moreover for a fading effect don't apply a class but apply style like this for hiding

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

For showing it back do:

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

This one should work as expected:

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

Just give a higher delay

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

Hope this fixes your problem.

Upvotes: 4

Related Questions