Geek asks and answers

D3.js: stop transitions interrupted when hovering over the mouse?

I am working with D3 input / output selection, and I want to add a transition to mouse events.

The problem is that if I hang the letters as they move, they freeze, because the transition of the position is interrupted.

Here is a JSFiddle example demonstrating the problem: http://jsfiddle.net/uEuE4/1/ , and this is the code I use to add mouseover events to the update and enter the choices:

text
.on('mouseover', function(d) { 
  d3.select(this).transition().duration(100).style('fill', 'yellow');
});

How can I add mouseover event handlers only after all the other transitions are complete to stop the freezing of letters?

Any advice on creating code more DRY would be very welcome.

+6
source share
3 answers

, .

text
.on('mouseover', function(d) { 
  d3.select(this).transition("fillColor").duration(100).style('fill', 'yellow');
});
+3

( , ) : css pointer-events: none svg; . , , , , svg.

:.

<div class="chart-container">
    <svg></svg>
</div>

:

$('.chart-container').addClass('no-mouse');
d3.select("svg").on("mouseover", function(d) {...})
    .on("mouseout", function(d) {...})
    .transition()
        .duration(animDuration)
        .attr("...", ...);
setTimeout(function() {
    $('.chart-container').removeClass('no-mouse');
}, animDuration+10);

css:

.no-mouse {
    pointer-events: none;
}

Firefox, Safari, Chrome IE 8. .

+2

@Jason, , .

, , , "",
:

text.on('mouseover', function(d) {
        d3.select(this).transition("texTr").duration(100).style('fill', 'yellow');
});

enter_text.on('mouseover', function(d) {
        d3.select(this).transition("enterTexTr").duration(100).style('fill', 'yellow');
});

, D3 , , , ( ) (, , ), .

; .interrupt("transitionName"):

.on("mouseover", function() {
        d3.select(this).interrupt("fadeOut")
        .attr("fill", "orange")
})

.on("mouseout", function(d) {
        d3.select(this).transition("fadeOut")
            .duration(5000)
            .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
})

fill orange fadeOut fadeOut (5 !).

, :)

+2
source

More articles:


All Articles