本文介绍了D3序列旭日动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是新来的D3,我试图升级与缩放和动画
I'm new to D3 and am trying to upgrade Kerryrodden's sequences sunburst with zooming and animation:
我已经添加了的onclick
事件变焦机遇,充分重绘的路径:
I've added the zooming opportunity with the onclick
event and fully redraw the paths:
function click(d)
{
d3.select("#container").selectAll("path").remove();
var nodes = partition.nodes(d)
.filter(function(d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
}) ;
var path = vis.data([d]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors[d.name]; })
.style("opacity", 1)
.on("mouseover", mouseover)
.on("click", click);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
}
但现在我有一些麻烦动画。我发现attrTween的许多版本:
But now I have some troubles with animation. I found many versions of attrTween:
,
)
但他们都不在我的情况下工作。
but none of them work in my case.
:
我如何可以动画这个旭日的明细?
How can I animate the drilldown of this sunburst?
推荐答案
解决方案成立:
新增功能arcTween和存储的轴插补
Added functions arcTween and stash for axis interpolation
function arcTween(a){
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
};
function stash(d) {
d.x0 = 0; // d.x;
d.dx0 = 0; //d.dx;
};
和转移()属性的路径初始化:
and transition() property to the paths initialization:
path.each(stash)
.transition()
.duration(750)
.attrTween("d", arcTween);
感谢所有。
这篇关于D3序列旭日动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!