将curveStep应用于d3 force Directed layout中的路径答案

【问题标题】：Apply curveStep to a path in d3 forceDirected layout将curveStep应用于d3 force Directed layout中的路径
【发布时间】：2021-03-15 07:06:28
【问题描述】：

我需要将 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/

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

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

【问题讨论】：

看看answer 中的第三个 sn-p，它使用（自定义）曲线进行 d3 力布局。要使用curveStep，只需将.curve(curve) 替换为.curve(d3.curveStep) 即可获得所需的结果。
感谢您的回答安德鲁 - 我能够得到我正在寻找的结果。我将发布作为答案，但正在寻找有关重构代码以使其更具说服力的建议

标签： javascript d3.js

【解决方案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)
})

}

【讨论】：