0
現在、D3ライブラリを使用してドーナツチャートを作成しています。私は、ボタンが押されたときにトゥイーンするチャートの2つの状態を持っています。円グラフ、ポリライン、およびテキストラベルは、ボタンが押されたときにチャートの周りを正しくツイーンします。しかし、私が持っているサークルのいくつかは、ボタンを押すと正しくトゥイーンしません。円はそのまま残りますが、新しい円は変換の終点に描画されます。D3のjavascriptライブラリを使用すると、サークルに正しくトゥイーンが表示されない
が、私はここの挙動を示しjsfiddleを持っている：http://jsfiddle.net/Qh9X5/7847/
円を制御問題のコードは、具体的にはここにある：
/* ------- OUTER POINTS -------*/
var outerPoint = fndAfter.select(".outerPoints").selectAll(".outerPoint")
.data(pie(data), key);
outerPoint.enter()
.append("circle")
.attr("r", "2");
outerPoint.transition().duration(1000)
.attrTween("transform", function (d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
});
outerPoint.exit()
.remove();
/* ------- INNER POINTS -------*/
var innerPoint = fndAfter.select(".innerPoints").selectAll(".innerPoint")
.data(pie(data), key);
innerPoint.enter()
.append("circle")
.attr("r", "2");
innerPoint.transition().duration(1000)
.attrTween("transform", function (d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + midPoint(midPoint(arc.centroid(d2), outerArc.centroid(d2)), outerArc.centroid(d2)) + ")";
};
});
innerPoint.exit()
.remove();
私はattrTweenが同じに動作するはずという印象の下にありましたどんな要素であろうと、すべての変換関数に対してです。