d3 force layout 节点之间的固定链接答案

【问题标题】：d3 force layout fixed links between nodesd3 force layout 节点之间的固定链接
【发布时间】：2016-10-02 12:19:36
【问题描述】：

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

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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

在您的第一个数据块中，link 并不是真正的 link，因为您指定数据的方式d3 从来没有真正连接两个节点。然后它只是结束表现得像一个节点，受布局中的力影响，它从节点收缩。

那么，我们如何让它表现得像一个真正的链接？您在这里受到限制，您有两种选择如何提供d3 数据。第一个是您在第二个 sn-p 中如何使用它，将源和目标指定为节点对象。第二个是将源和目标指定为节点数组的索引：

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
   }];

【讨论】：