javascript - d3中的平滑过渡

Question

d3.js 中使用 SVG 的简单球运动过渡。

jsfiddle：http: //jsfiddle.net/eNe3U/1/

当我运行上面的示例时，球在过渡过程中看起来很模糊，并且过渡不平滑。

是否有任何选项可以在 d3.js 中平滑过渡，或者我在这里遗漏了什么？

代码 ：

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");  ​