javascript - d3のスムーズな遷移

Question

SVGを使用したd3.jsでの単純なボールの動きの遷移。

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