Javascript 在路径上插入节点,并根据其计数更改距离
我需要做的是在一条路径上插入节点(或者只插入没有路径的坐标),这将考虑节点位置(例如node.x和node.y),并根据它们的计数动态地重新计算它们的距离 我试过:Javascript 在路径上插入节点,并根据其计数更改距离,javascript,d3.js,Javascript,D3.js,我需要做的是在一条路径上插入节点(或者只插入没有路径的坐标),这将考虑节点位置(例如node.x和node.y),并根据它们的计数动态地重新计算它们的距离 我试过: d3.scale.linear().domain([0,width]).range([height, 0]); 但它只计算svg元素的对角线。有没有办法做到这一点?为了更好地理解我试图做什么,我附上了一个图像插图。更好的办法是将节点放在一条非线性路径上,但我不知道如何做到这一点 谢谢 Lukas我通过减少节点的计数来实现这种行为
d3.scale.linear().domain([0,width]).range([height, 0]);
但它只计算svg元素的对角线。有没有办法做到这一点?为了更好地理解我试图做什么,我附上了一个图像插图。更好的办法是将节点放在一条非线性路径上,但我不知道如何做到这一点
谢谢
Lukas我通过减少节点的计数来实现这种行为,并根据对角路径长度动态计算新的节点距离。我添加了一个路径,它对用户是隐藏的,如下所示:
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);
希望它能帮助别人
卢卡斯来一杯怎么样?