D3强制布局节点间固定链接

d3 force layout fixed links between nodes

本文关键字：链接 节点 布局 D3      更新时间：2023-09-26

我有一段代码来显示一个力图，可以在这个链接- https://jsfiddle.net/u49s9sth/3/

在上面的例子中，源数据表示为

var nodes = [{
    id: 0,
    reflexive: false,
    "x": 169,
    "y": 110,
    name: "event"
  }, {
    id: 1,
    reflexive: false,
    "x": 369,
    "y": 110,
    name: "email"
  }],
  lastNodeId = 1,
  links = [{
    source: {
    id: 0,
    reflexive: false,
    "x": 169,
    "y": 110,
    name: "event"
  },
    target: {
    id: 1,
    reflexive: false,
    "x": 369,
    "y": 110,
    name: "email"
  },
    left: false,
    right: true
  }];

在这种情况下，节点之间的链接显示为较小的大小后会缩小。但是使用相同的代码，如果我将源数据作为

var nodes = [{
    id: 0,
    reflexive: false,
    "x": 169,
    "y": 110,
    name: "event"
  }, {
    id: 1,
    reflexive: false,
    "x": 369,
    "y": 110,
    name: "email"
  }],
  lastNodeId = 1,
  links = [{
    source: nodes[0],
    target: nodes[1],
    left: false,
    right: true
  }];

这是直接引用nodes的数据，它将工作得很好下面是实际结果的示例- https://jsfiddle.net/u49s9sth/4/

为什么会发生这种情况?如何通过直接给出数据来实现第二个结果?

在您的第一个数据块中，链接并不是真正的链接，因为您指定数据d3的方式从未实际连接两个节点。最后，表现得像一个节点，受制于布局中的力，它会从节点处收缩。

那么，我们如何让它表现得像一个真正的链接呢?你在这里是有限的，你有两种选择如何给d3的数据。首先是如何在第二个代码片段中使用它，将源和目标指定为节点对象。第二个是指定源和目标作为节点数组的索引: 
var nodes = [{
    id: 0,
    reflexive: false,
    "x": 169,
    "y": 110,
    name: "event"
  }, {
    id: 1,
    reflexive: false,
    "x": 369,
    "y": 110,
    name: "email"
  }],
  lastNodeId = 1,
  links = [{
    source: 0, 
    target: 1,
    left: false,
    right: true
   }];
相关文章：