javascript - d3.js 捆绑布局，移动节点 inklusiv 线

Question

我想在捆绑布局中移动选定的节点并重新绘制线条。

您对我如何解决这个问题有什么建议吗？

首先我尝试通过翻译移动节点:

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);

非常感谢您的帮助!

Answer 1

您可以操纵线条属性并重新绘制线条。

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);