我想在捆绑布局中移动选定的节点并重新绘制线条。
您对我如何解决这个问题有什么建议吗?
首先我尝试通过翻译移动节点:
node.attr("transform", function (nodeObject) {
var translationValue = nodeObject.y
return "rotate(" + (nodeObject.x - 90) + ")translate(" + (nodeObject.y + 20) + ")";
})
但是,如果我尝试以这种方式移动线路,我将一事无成。它只会移动整条线,我无法控制端点。
我尝试删除所有线条并重新绘制它们。但连接将指向原始点而不是移动的点。
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.75)
.radius(function (d) {
return d.y;
})
.angle(function (d) {
return d.x / 180 * Math.PI;
});
vis.selectAll("path.link").remove();
vis.selectAll("path.link")
.data(bundle(links))
.enter().append("path")
.each(function (d3Object) {
d3Object.source = d3Object[0], d3Object.target = d3Object[d3Object.length - 1];
})
.attr("d", line);
非常感谢您的帮助!
最佳答案
您可以操纵线条属性并重新绘制线条。
link.transition()
.attr("d",
function(d, i) {
if (d.target === d3Object || d.source === d3Object) {
line.radius(function (d) {
return d.y - 51;
});
line.angle(function (d) {
return d.x / 180 * Math.PI;
});
} else {
line.radius(function (d) {
return d.y;
});
line.angle(function (d) {
return d.x / 180 * Math.PI;
});
}
return line(splines[i]);
})
.duration(1500);
关于javascript - d3.js 捆绑布局,移动节点 inklusiv 线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32528502/