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饼图标签的平滑动画？

1 个答案: