Question

我有这个小提琴：http://jsfiddle.net/gp0u5rLu/74/

它基于以下示例：https://bl.ocks.org/mbostock/4600693

据我了解，似乎有一个中间节点会影响路径上的曲线。

edges.forEach(function(link) {
    var s = link.source = nodeById.get(link.source),
      t = link.target = nodeById.get(link.target),
      i = {}; // intermediate node
   testNodes.push(i)
    edges.push({
      source: s,
      target: i
    }, {
      source: i,
      target: t
    });
    bilinks.push([s, i, t]);
  });

以下是绘制路径的方法：

function positionLink(d) {
    return "M" + d[0].x + "," + d[0].y +
      "Q" + d[1].x + "," + d[1].y +
      " " + d[2].x + "," + d[2].y;
  }

d [0]是源节点
d [1]是中间节点
d [2]是目标节点

有两个问题。如果单击几次“添加数据”按钮，它将清除边缘。我认为这是由于路径的曲率造成的，因为当我拖动节点之后，路径会重新出现。这导致了我的第二个问题，即曲线太“弯曲”。

如果我了解曲线是如何实际创建的，这将帮助我解决曲线过于“弯曲”的问题。

谢谢

编辑

我设法解决了一个临时问题，但这不是一个适当的解决方案。

请参见小提琴：http://jsfiddle.net/gp0u5rLu/75/

此处的解决方法是将节点的起始位置设置为容器的中心。这样，路径将被“拉”到中心而不是外部。

testNodes.forEach(function(d){
            d.x =  width/2
      d.y =  height/2
})

同样，我敢肯定还有更好的方法，现在这可能行得通。

*单击“添加”大约6至8次后，边缘消失的问题仍然存在。

在两个节点D3力网络之间创建较浅的弯曲SVG路径

0 个答案: