visualization - 如何在 D3.js 中的力有向图中将文本附加到一行并呈现该文本？

Question

我正在尝试学习如何使用 D3.js 中的 force.layout 功能，并且一直在构建“力定向径向图”。

我已经能够成功地从节点（例如节点名称）附加和渲染文本，但我似乎无法从行（或其他人可能称之为链接或边缘的内容）（例如关系名称）中获取要渲染的文本。

有谁知道我在哪里可以找到很好的例子来教如何做到这一点，或者有可以纠正我所做的事情的代码片段？

谢谢你尽你所能的帮助。非常感谢。

我最好的，

坦率

Answer 1

该示例已经展示了如何将文本添加到边缘。这是相关的代码：

      // Append text to Link edges
  var linkText = svgCanvas.selectAll(".gLink")
      .data(force.links())
    .append("text")
  .attr("font-family", "Arial, Helvetica, sans-serif")
  .attr("x", function(d) {
      if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
      else { return (d.target.x + (d.source.x - d.target.x)/2); }
  })
      .attr("y", function(d) {
      if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
      else { return (d.target.y + (d.source.y - d.target.y)/2); }
  })
  .attr("fill", "Maroon")
      .style("font", "normal 12px Arial")
      .attr("dy", ".35em")
      .text(function(d) { return d.linkName; });