Dimple.js 饼图标签的动画是否流畅？

Question

我正在使用 dimple.js 绘制饼图。

我想要饼图切片内的标签。我正在使用 John Kiernander's answer to another question 的修改版本来执行此操作：

    mySeries.afterDraw = function (shape, data) {
    console.log(myStoryboard)
        var ctd = getCentroid(data, myChart),
            s = d3.select(shape),
            degrees = ((data.startAngle + (data.endAngle - data.startAngle) / 2) * 180) / Math.PI;
        if (degrees < 180) {
            degrees -= 90;
        } else {
            degrees += 90;
        }
        if (Math.abs(data.startAngle - data.endAngle) > 0.25) {
            myChart._group.append("text")
                    .attr("id","innerLabel")
                .attr("transform", "rotate(" + degrees + ", " + ctd[0] + ", " +  ctd[1] + 4 + ")")
                .attr("dy", "0.35em")
                .attr("x", ctd[0])
                .attr("y", ctd[1])
                .style("text-anchor", "middle")
                .style("pointer-events", "none")
                .text(data.aggField[0]);
        }
    };

问题是我也想要动画饼图，显示切片的大小随时间变化。

使用上述方法需要我在每次勾选时删除并重新绘制文本：

  myStoryboard.onTick = function (e) {
  svg.selectAll("#innerLabel").remove();
      }

因此，这些标签的每一个刻度都会被删除并重新绘制。不幸的是，删除和重新绘制它们所需的时间在 FF 中非常明显（chrome 和 IE 都不会呈现页面），远远超出了单纯的闪烁效果。我可以减少隐藏的延迟吗？否则，有没有办法加快速度或平滑地为文本本身制作动画？

数据集很小，只有15kb，所以每次删除和重新绘制标签真的需要这么长时间，我会感到非常惊讶。馅饼最多有 11 片。

我是 Javascript 的超级新手，所以我希望有一种简单的方法来减少闪烁。尝试平滑地为文本设置动画似乎有问题，因为您希望文本与故事板同步移动。

谢谢！

Answer 1

我查看了代码，问题似乎是标准故事板播放是将一半的 FrameDuration 用于固定状态，将一半的 FrameDuration 从一种状态移动到另一种状态。问题是在图表运动过程中，标签不存在，所以一半时间标签在那里，一半时间标签不在。

我花了大约一个小时试图弄清楚如何通过使用酒窝方法来延长冻结状态的时间，但唉，我是一个 d3/javaScript 新手，最终只是崩溃并重写了 _goToFrame方法：

myStoryboard._goToFrameIndex = function (index) {
  this._frame = index % this._getCategories().length;
  // Draw it with half duration, we want the effect of a 20% animation 80% pause.
  this.chart.draw(this.frameDuration / 5);
  };

Dimple.js 饼图标签的动画是否流畅？

Dimple.js smooth animation of pie chart labels?

javascript

dimple.js