添加文本标签以强制d3.js中的有向图链接 [英] Adding text labels to force directed graph links in d3.js

问题描述

我无法在下面的D3JS连接的节点图中将文本添加到连接节点的链接中: http ://jsfiddle.net/rqa0nvv2/1/

I am having trouble adding a text to the links that connect the nodes in the following D3JS connected node graph: http://jsfiddle.net/rqa0nvv2/1/

任何人都可以向我解释添加它们的过程是什么吗?

Could anyone please explain to me what is the process to add them?

  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: ";});

谢谢！

推荐答案

只需进行一些更改即可将文本附加到边缘.

Just a couple changes are needed to get the text attached to the edges.

首先，当前方法的问题在于您将<text>推到了<line>内.这只是在SVG中无法完成，因此您需要创建一个<g>(组)以同时包含行和文本:

First, the problem with your current method is that you are shoving the <text> inside the <line>. This just can't be done in SVG, so you need to create a <g> (group) to contain both the line and the text:

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

好吧，仅添加此内容不会在视觉上发生任何变化，但确实会创建我们需要的组.因此，我们需要添加类似以下内容的文本:

Ok, just adding this won't change anything visually, but it does create the groups that we need. So we need to add the text with something like:

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");

这将添加文本并进行初始定位.随意(请！)设置文本样式并根据您的外观更改内容.最后，我们需要使其与力导向图一起移动:

This adds the text and initially positions it. Feel free (please!) style the text and change the content according to how you want it to look. Finally, we need to make it move with the force-directed graph:

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

这当然很简单，因为它与我们已经做过的一样！

Which is simple of course since it's the same thing that we already did!

这篇关于添加文本标签以强制d3.js中的有向图链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！