如何在力有向图 d3 中将文本添加到边缘？答案

【问题标题】：How can I add text to edges in a force directed graph d3?如何在力有向图 d3 中将文本添加到边缘？
【发布时间】：2019-08-21 22:55:01
【问题描述】：

我希望能够在节点之间的边缘添加文本。但是，我能够在节点顶部显示文本的方式似乎不适用于向边缘添加文本。我该怎么做？我应该尝试不同的方法吗？

我已经广泛研究了有关此问题的其他线程，但我似乎无法理解为什么我的代码不工作/让他们的代码在我的图表上工作。我是 d3 和 Javascript 的初学者，所以也许我忽略了一些简单的东西。

我的代码链接可以在这里找到：https://jsfiddle.net/obe02/zxva4f5r/

  // update existing links
  path.classed("selected", (d) => d === selectedLink)
      .style("marker-start", function(d) {return getMarkers(d, false, true)})
      .style("marker-end", function(d) {return getMarkers(d, false, false)});

  // remove old links
  path.exit().remove();

  // add new links
  path = path.enter().append("svg:path")
    .attr("class", "link")
    .classed("selected", (d) => d === selectedLink)
    .style("marker-start", function(d) {return getMarkers(d, false, true)})
    .style("marker-end", function(d) {return getMarkers(d, false, false)})
    .on("mousedown", (d) => {
      if (d3.event.shiftKey) return;

      // select link
      mousedownLink = d;
      selectedLink = (mousedownLink === selectedLink) ? null : mousedownLink;
      selectedNode = null;
      update();
    })
    .merge(path);

path.append("svg:text")
    //.attr("dx", function(d) { return d.w/10})
    //.attr("dy", -4)
    .attr("x", function(d) {return d.length / 2})
    .attr("y", function(d) {return (d.length / 2) + 2})
    .attr("class", "edgelabel")
    .text((d) => d.length);```

【问题讨论】：

标签： d3.js

【解决方案1】：

我在这里为任何感兴趣的人找到了答案。它并不像我最初想象的那么简单；您必须创建一些不同的元素才能显示文本。

Add text/label onto links in D3 force directed graph

【讨论】：