Question

我有一段代码可以显示一个力图，可以在此链接中找到 - 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/

为什么会这样？如何通过直接提供数据来实现第二个结果？

Answer 1

在您的第一个数据块中，链接实际上不是链接，因为您指定数据的方式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
   }];

d3强制布局节点之间的固定链接

1 个答案: