デフォルトのサンバーストの例から始めて、クリック時にアニメーションを追加しようとしました。くさびをクリックすると、そのくさびが中心要素になります。これは、いくつかのケースを除いてうまく機能します。深さが 2 (0 ベース) を超えると、一部のウェッジが正しくアニメーション化されないように見えます。間違った場所でアニメーションを開始しているように見えますが、正しい場所で終了します。
関連するコードは次のとおりです。他の人に役立つことを願っています。
animate = function (d) {
var oldDs = [], topD, includeds;
if (animating)
return;
animating = true;
topD = (d == selected && d.parent) ? d.parent : d;
if (selected == topD) {
animating = false;
return;
}
selected = topD;
svg.selectAll("path").filter(function (f) {
return (!isDescendant(f, topD))
}).transition().duration(1000).style("opacity", "0").attr("pointer-events","none");
includeds = svg.datum(topD).selectAll("path").filter(function (f) {
return isDescendant(f, topD);
});
// step 1 - save the current arc settings
includeds.data().each(function (d) {
oldDs[d.ac_id] = {x: d.x, dx: d.dx, y: d.y, dy: d.dy};
});
// step 2 - recalculate arc settings and animate
includeds.data(partition.nodes) // recalculates
.transition().duration(1000).attrTween("d", function (d) {
var oldD = oldDs[d.ac_id],
interpolator = d3.interpolateObject(oldD, d);
return function (t) {
return arc(interpolator(t));
}
}).style("opacity", "1").attr("pointer-events","all");
setTimeout(function(){ animating = false; }, 1000);
};
私のコードは深度とは関係がないため、問題は別の場所にあると思われますが、見つけることができませんでした。この不具合は、すべてのブラウザ (少なくとも Chrome、Firefox、および IE) に影響を与えるようです。
だから、私の質問: 問題は何ですか?どうすれば修正できますか?