我是 D3 新手,正在尝试升级 Kerryrodden's sequences sunburst具有缩放和动画:
我通过 onclick
事件添加了缩放机会,并完全重绘了路径:
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:
bl.ocks.org/mbostock/1306365 , bl.ocks.org/mbostock/4348373 ),
但它们都不适用于我的情况。
如何制作此旭日图的向下钻取动画?
最佳答案
解决方案成立:
添加了用于轴插值的 arcTween 和 stash 函数
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;
};
和transition()属性到路径初始化:
path.each(stash)
.transition()
.duration(750)
.attrTween("d", arcTween);
谢谢大家。
关于javascript - D3 序列旭日动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22733117/