Transition error while using d3js

Question

Hi I am using this code for making a bar/stacked_bar graph

bars.append('rect')
    .attr('height', axes.ver.scale.rangeBand())
    .attr('width', 0)
    .attr('x', function (d, i) { var value = axes.hor.scale(csum[i]); csum[i] += d.value; return value; })
    .attr('y', function (d) {return axes.ver.scale(d.name); })
    .classed('cr_' + uv.util.formatClassName(self.categories[idx]), true)
    .style('stroke', 'none')
    .style('fill', color)
    .on('mouseover', uv.effects.bar.mouseover(self, idx))
    .on('mouseout', uv.effects.bar.mouseout(self, idx))
    .transition()
        .duration(uv.config.effects.duration)
        .delay(idx * uv.config.effects.duration)
        .attr('width', function (d,i) { return axes.hor.scale(csum[i]) - axes.hor.scale(csum[i]-d.value); });

I have an mouseover event attached which changes the color on hover. My problem is that when my chart is rendering and at the same time I hover over a currently rendering bar then it does not render properly. I have linked the screenshot and the error is that a gap comes.

http://db.tt/ng1akZDy

Please Tell me what am I doing wrong.

Answer 1

Don't know if the problem is exactly the same. Try to add this to your CSS or in line styles:

pointer-events: all;

https://stackoverflow.com/a/9210392/731179