d3 переход не работает, когда запускается из обработчика Mouseover/MouseOut

Question

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/

Переход кажется, не следует принимать во внимание, то изменение происходит мгновенно. Чего я здесь, очевидно, не хватает?

Answer 1

Вы используете два разных типа строк, чтобы указать цвета (с и без #). D3 не знает, как интерполировать между этими разными типами. Работает, если вы используете тот же:

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

Полный пример here.