2

我从默认的Sunburst 示例开始，并尝试在单击时添加动画 - 单击楔形会使该楔形成为中心元素。除了在少数情况下，这很有效——看起来如果深度超过 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）。

所以，我的问题是：问题是什么，我该如何解决？

4

0 回答 0