javascript - 将curveStep应用于d3 forceDirected布局中的路径

Question

我需要将 forceDirected 布局转换为使用阶梯路径曲线而不是点对点直线。连接节点的典型链接使用这种方法。

  function ticked() {
   link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node
     .attr("cx", function (d) { return d.x+6; })
     .attr("cy", function(d) { return d.y-6; });

}

这是一个 forceDirected 作为用例的示例

https://www.d3-graph-gallery.com/graph/network_basic.html

这里大致了解我希望如何将链接呈现为红色。

这是我尝试用作解决方案的方法

https://www.geeksforgeeks.org/d3-js-curvestep-method/

这是我根据上面的链接示例测试的一段代码，但没有取得多大成功

var line = d3.line()
.x((d) => d.x)
.y((d) => d.y)
.curve(d3.curveStep);

 function addConnections(o){
  // o  is link.d from existing links between nodes

 var ldata = []

 var d = {x: o.source.x,y:o.source.y}
 ldata.push(d)
 var d = {x: o.target.x,y:o.target.y}
 ldata.push(d)

 var steps = svg
.selectAll("path")
.data(ldata)
.enter()
.append("path")
.attr("d",function(d){
console.log(d)
line(d)
})
.classed("steps",true)
}

标签： javascriptd3.js

Answer 1

这是我想出的最后一个简单的解决方案，用于在 forceDirected 布局中生成阶梯曲线作为节点之间的链接

line = d3.line()
.x((d) => d.x)
.y((d) => d.y + 5)
.curve(d3.curveStepAfter)

function ticked(){

link
.attr("d", function (d) {
a.push({x: d.source.x, y: d.source.y});
a.push({x: d.target.x, y: d.target.y});
return line(a)
})

}