SVG path stroke-dasharray transition works backwards in some browsers -d3js

Question

I'm using D3js and I have plotted a graph that works like this (edit: new fiddle with JSON data)

I'm actually using an external JSON file for my data.

var data=[{name:'fruits', value:2},{name:'veggies', value:3},{name:'milk', value:5},{name:'empty', value:0}];

My problem is that when I open the file in another system with a different resolution, the line that I'm plotting works backwards. I think the problem is due to the different resolution or could it be because of something else. Can someone help me to solve this problem.

Thanks in advance...

Answer 1

I'm not sure where you got the code for the version of the stroke dash transition that you're using, but I can see why it would create unusual behaviour in some browsers:

path1.attr("stroke-dasharray", totalLength + " " + totalLength)
 .attr("stroke-dashoffset", totalLength)
 .transition()
 .duration(duration)
 .ease("linear")
 .attr("stroke-dashoffset", 0);

You're defining a dash pattern consisting of a solid dash the entire length of the line, followed by a gap that is also the length of the line, initially offset by the length of the line and transitioning to zero offset. With that information, and with the unfortunately vague definition of the stroke-dashoffset property in the specs ( " ‘stroke-dashoffset’ specifies the distance into the dash pattern to start the dash" ), I really have no idea what should be the outcome.

Try using:

path1.attr("stroke-dasharray", 0 + " " + totalLength)
 .transition()
 .duration(duration)
 .ease("linear")
 .attr("stroke-dasharray",  totalLength + " " + 0);

That tells it to start with a zero-length dash and a gap the entire length of the path, and transition to having a dash the entire length of the path and a zero-length gap. I don't have Linux to test it out, but I suspect it should work anywhere.

Answer 2

I ran into the same problem and fixed it by adding this line of code:

data.sort(function(a, b){ return d3.descending(a.foo, b.foo); });

or

data.sort(function(a, b){ return d3.ascending(a.foo, b.foo); });

This will sort your data descending or ascending forcing the animation to run a different direction, depending which one works for you.