[Solved]-d3 transition not working when triggered from mouseover/mouseout handler-d3.js

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.