我需要做的是在路径上插入节点(或者只是没有路径的坐标),这将尊重节点位置(例如 node.x 和 node.y)并根据它们的计数动态重新计算它们的距离。
我试过:
d3.scale.linear().domain([0,width]).range([height, 0]);
但它只计算 svg 元素的对角线。有没有办法实现这一目标?为了更好地理解我想要做什么,我附上了一张图片说明。更好的办法是将节点放在非线性路径上,但我无法弄清楚如何做到这一点。
谢谢
卢卡斯
我需要做的是在路径上插入节点(或者只是没有路径的坐标),这将尊重节点位置(例如 node.x 和 node.y)并根据它们的计数动态重新计算它们的距离。
我试过:
d3.scale.linear().domain([0,width]).range([height, 0]);
但它只计算 svg 元素的对角线。有没有办法实现这一目标?为了更好地理解我想要做什么,我附上了一张图片说明。更好的办法是将节点放在非线性路径上,但我无法弄清楚如何做到这一点。
谢谢
卢卡斯
我设法通过减少节点距离来实现这种行为,并根据对角路径长度动态计算新节点距离。我添加了一个对用户隐藏的路径,如下所示:
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;
然后简单地得到新的距离。然后,使用对角函数设置 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);
希望它可以帮助某人。
卢卡斯