Javascript d3.js捆绑布局,移动节点inklusiv行

Javascript d3.js捆绑布局,移动节点inklusiv行,javascript,d3.js,Javascript,D3.js,我想移动捆绑布局中的选定节点并重新绘制该行 你对我如何解决那个问题有什么建议吗 首先,我尝试通过translate移动节点: node.attr("transform", function (nodeObject) { var translationValue = nodeObject.y return "rotate(" + (nodeObject.x - 90) + ")translate(" + (nodeObject.y + 20) +

我想移动捆绑布局中的选定节点并重新绘制该行

你对我如何解决那个问题有什么建议吗

首先,我尝试通过translate移动节点:

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

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

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