饼图标签的平滑动画
Dimple.js smooth animation of pie chart labels?
我正在使用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);
};
相关文章:
- 如何正确编程jQuery动画与平滑(导航栏)
- 如何平滑地设置twitter引导程序进度条的动画
- jQuery-slideToggle动画不平滑
- 图像动画不平滑
- 在一定百分比上禁用引导进度条的平滑动画过渡
- jQuery:滚动时平滑动画字体大小变化
- jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化
- 如何通过requestAnimationFrame平滑动画
- 请帮助使用加速度计 JavaScript 读取平滑动画
- 基于滑块值的平滑动画
- 如何创建朝向目标的平滑动画
- 饼图标签的平滑动画
- 如何滚动到一个锚点与平滑动画土坯边缘
- 平滑动画背景颜色不透明度后,基础图像加载
- 平滑动画在kinetic.js (html5 canvas)
- javascript平滑动画从X,Y到X1,Y1
- CSS和jQuery模拟时钟-平滑动画
- HTML部分的平滑动画
- 列表视图内部可折叠面板的平滑动画
- 平滑动画在HTML5画布