CODEWITHSUNDEEP
d3.js
SergiuB
SergiuB

Reputation: 126

d3 transition not working when triggered from mouseover/mouseout handler

d3.select('svg')
    .append('rect')
    .attr('width', 50)
    .attr('height', 50)
    .style('fill', '#BFDEFF')
    .on('mouseover', function () {
        d3.select(this).transition().style('fill', '2B24FF');
    })
    .on('mouseout', function () {
        d3.select(this).transition().style('fill', 'BFDEFF');
    });

http://jsfiddle.net/g63hw/1/

Transition seems to not be taken into account, the change happens instantly. What am I obviously missing here?

Upvotes: 1

Views: 206

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

You're using two different types of strings to specify the colours (with and without #). D3 doesn't know how to interpolate between those different types. Works if you use the same:

.style('fill', '#BFDEFF')
.on('mouseover', function () {
    d3.select(this).transition().style('fill', '#2B24FF');
})
.on('mouseout', function () {
    d3.select(this).transition().style('fill', '#BFDEFF');
});

Complete example here.

Upvotes: 1

Related Questions