D3.js 强制有向图，在连接源和目标的线上显示文本答案

【问题标题】：D3.js force directed graph, Displaying text over the lines joining Source and TargetD3.js 强制有向图，在连接源和目标的线上显示文本
【发布时间】：2013-12-09 06:53:39
【问题描述】：

我是 D3.js 强制有向图的新手，并遵循http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html 中给出的示例

该示例完全符合我的要求，但我需要一点帮助：我想在每个节点上连接源和目标的线条上显示一些信息（理想情况下，在连接源和目标的线条的中心） )。

如果有人以前这样做过，请告诉我。另外，请告诉我是否有其他图表可以使用？

如果有类似的问题，请在该问题上移动此主题。

【问题讨论】：

你见过this question吗？
嗨 Lars，谢谢或链接，这就是我想要的，但我在这里有一个小问题。我可以从 JsonArray 中再读取一个值吗（我现在正在这样做，包括源、目标和类型）我想再发送一个名为 distance 的标签，例如这个代码 var links = [ {source: "Microsoft", target:"亚马逊”，类型：“toSource”，距离：“10”}，{来源：“诺基亚”，目标：“高通”，类型：“toTarget”，距离：“20”}]；编码并将距离值放在边缘？因为我是从 JSONarray 读取它，所以对我来说会更容易。
我不确定你的意思——这个问题解释了如何为链接添加标签。这不是你想要的吗？
嗨，Lars，在玩了一些代码之后，我能够按我想要的方式显示文本。请在这里查看修改jsfiddle.net/ashishyete/DEeNB 谢谢，Ashish
如果这解决了你的问题，你能把它作为答案发布吗？

标签： javascript d3.js force-layout

【解决方案1】：

根据我的 JSON 数组做了一个小更新

var links = [
    {source: "Apple", target: "Nokia", type: "resolved",distance:"25"},
  {source: "Qualcomm", target: "Nokia", type: "resolved",distance:"30"},
  {source: "Apple", target: "Motorola", type: "suit",distance:"35"},
  {source: "Microsoft", target: "Motorola", type: "suit",distance:"40"},
  {source: "Motorola", target: "Microsoft", type: "suit",distance:"45"}
];

我能够从 JSON 数组中读取距离标记并将其放置在文本中的行中，现在该图将是完整的动态图，（即）从 JSON 数组中读取并显示所有内容。解决办法是http://jsfiddle.net/DEeNB/36/

【讨论】：