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

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

1 个答案: