我试图将D3 Pack Layout与链接结合起来。它工作在初始状态,但当我尝试缩放svg路径元素的位置时不会更新。如何在用户执行缩放时转换路径以使它们与节点对齐?下面是我的缩放功能。 要查看整个代码,请参阅js fiddle。我希望有人可以帮助我!
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("circle")
.attr("cx", function(d) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
})
.attr("r", function(d) {
return k * d.r;
});
t.selectAll("text")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y);
})
.style("opacity", function(d) {
return k * d.r > 20 ? 1 : 0;
});
console.log(t.selectAll('path'));
d3.selectAll('path')
.attr('class', function() {
// TODO: diversify
return 'child-branch';
})
.style('stroke', function(d) {
return d3.rgb(d3.scale.category20(d.target.by_alliance_with + 1)).darker();
})
.attr('d', function(d) {
console.log("d", d);
return linkArc(d);
});