饼图标签的平滑动画

Dimple.js smooth animation of pie chart labels?

本文关键字：平滑 动画 标签 图标      更新时间：2023-09-26

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

我希望标签位于饼图的切片内。我使用了John kierander对另一个问题的答案的修改版本:

    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的超初学者，所以我希望有一个简单的方法来减少闪烁。尝试流畅地动画文本似乎有问题，因为您希望文本与故事板同步移动。

谢谢!

我查看了代码，问题似乎是标准的故事板玩法是将一半的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);
  };
相关文章：