在路径上插入节点，根据其计数改变距离

Question

我需要做的是在路径上插入节点（或者只是没有路径的坐标），这将遵循节点位置（例如node.x和node.y）并根据其计数动态重新计算它们的距离。

我试过了：

d3.scale.linear().domain([0,width]).range([height, 0]);

但它只计算svg元素对角线。有没有办法如何实现这一目标？为了更好地理解我想要做的事情，我附上了一个图像插图。更好的方法是将节点放在非线性路径上，但我无法弄清楚如何做到这一点。

由于

的Lukas

Answer 1

我设法通过按计数减少节点距离来实现此行为，并根据对角线路径legth动态计算新节点距离。我添加一个路径，这对用户是隐藏的，如下所示：

var points = [
                [0, height],
                [width, 0]                                                            
                ];


            var pth = svg.append("path")
                .data([[points]])
                .attr("class","diag")
                .attr("d", d3.svg.line()
                .tension(1)
                // Catmull–Rom
                .interpolate("basis"));

计算其长度：

halfDiagLength = pth.node().getTotalLength()/2;

然后sipmly获得新的距离。 然后，使用对角线函数设置x和y坐标：

var x = d3.scale.linear().domain([0,width]).range([height, 0]);    
n.x = Math.round(l.source.x)+linkLength;
n.y = x(n.x);

希望它有所帮助。

的Lukas