A simple ball movement transition in d3.js using SVG.
jsfiddle : http://jsfiddle.net/eNe3U/1/
When I run above example, the ball looks blurred during the transition and the tranistion is not smooth.
Is there any option to get smooth transition in d3.js or am I missing something here?
Code :
var width = 720, height = 580;
var padding = 50;
var svg = d3.select("body").append("svg");
svg.attr("width",width)
.attr("height",height);
var circle = svg.append("circle")
.attr("cx","100")
.attr("cy","100")
.attr("r",10)
.attr("stroke","red")
.attr("stroke-width","1")
.attr("fill","steelblue");
circle.transition()
.duration(2000)
.attr("cx","600")
.attr("cy","700")
.attr("fill","green");