在 d3.js 中添加文本标签以强制有向图链接答案

【问题标题】：Adding text labels to force directed graph links in d3.js在 d3.js 中添加文本标签以强制有向图链接
【发布时间】：2015-05-05 00:39:27
【问题描述】：

我在向连接以下 D3JS 连接节点图中的节点的链接添加文本时遇到问题：http://jsfiddle.net/rqa0nvv2/1/

谁能解释一下添加它们的过程是什么？

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("line")
      .attr("class", function(d) { if(d.value == "visible") {return "link";} else return "" })
      .style("stroke-width", function(d) { return Math.sqrt(d.stroke); });

   link.append("svg:title").text(function(d) { return "Unit: " +  ", Formula: ";});

谢谢！

【问题讨论】：

标签： javascript d3.js svg force-layout directed-graph

【解决方案1】：

只需进行几处更改即可将文本附加到边缘。

首先，您当前方法的问题是您将<text> 推入<line>。这不能在 SVG 中完成，因此您需要创建一个 <g>（组）来包含行和文本：

var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("g")
  .attr("class", "link-group")
  .append("line")
  .attr("class", function(d) { return d.value == "visible" ? "link" : ""; })
  .style("stroke-width", function(d) { return Math.sqrt(d.stroke); });

好的，只是添加它不会在视觉上改变任何东西，但它确实会创建我们需要的组。所以我们需要添加类似这样的文本：

var linkText = svg.selectAll(".link-group")
  .append("text")
  .data(force.links())
  .text(function(d) { return d.value == "visible" ? "edge" : ""; })
  .attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
  .attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); })
  .attr("dy", ".25em")
  .attr("text-anchor", "middle");

这会添加文本并初始定位它。随意（请！）为文本设置样式并根据您想要的外观更改内容。最后，我们需要让它随着力有向图移动：

force.on("tick", function() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

  linkText
    .attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
    .attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); });
});

这当然很简单，因为我们已经做了同样的事情！

【讨论】：