如何在D3.js中的强制有向图中的一行中添加文本并渲染该文本？ [英] How can I append text to and render that text from a line in a force directed graph in D3.js?

问题描述

我想学习如何使用D3.js中的force.layout功能，并且一直在构建一个强制定向径向图。

I'm trying to learn how to use the force.layout features in D3.js and have been building a "Force Directed Radial Graph".

我已经能够成功地附加和渲染节点的文本（例如节点名称），但我似乎不能获取要从线条（或其他人可能称为链接或边缘）呈现的文本（例如关系名称）。

I've been able to successfully append and render text from nodes (e.g. Node Names) but I can't seem to get text to render from the lines (or what others might call the links or edges) (e.g. Relationship Names).

有人知道我在哪里可以找到教学的好例子如何这样做或有代码片段可以纠正我做了什么？

Does anyone know where I can find good examples that teach how to do so or have code snippets that can correct what I've done?

感谢您提供任何帮助。非常感谢。

Thanks for any help you can offer. It's greatly appreciated.

我的最好，

Frank

推荐答案

示例已经显示如何向边添加文本。下面是相关的代码片段：

The sample already shows how to add text to the edges. Here is the relevant piece of code:

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

这篇关于如何在D3.js中的强制有向图中的一行中添加文本并渲染该文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！