从mouseover / mouseout处理程序触发时，d3转换不起作用

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。