javascript - 饼图标签的 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 的 super 初学者，所以我希望有一种简单的方法来减少闪烁。尝试平滑地为文本设置动画似乎有问题，因为您希望文本与 Storyboard同步移动。

谢谢!

Answer 1

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

我花了大约一个小时试图弄清楚如何通过使用 dimple 方法来延长卡住状态的时间，但遗憾的是我是 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);
  };