在 d3.js 中创建强制布局节点标签

Question

我有一个带有彩色节点的力图，我正在尝试添加标签。现在它有标签，但它是浏览器原生的小而难以阅读的标签。如何添加更易于查看的标签？

 <svg width="960" height="600"></svg>
 <script>
    var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory10);

var simulation = d3.forceSimulation()
 .force("link", d3.forceLink().id(function(d) { return d.id; }))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("got_relationships.json", function(error, graph) {
 if (error) throw error;

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

  var node = svg.append("g")
   .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

 node.append("title")
    .text(function(d) { return d.id; });

 simulation
   .nodes(graph.nodes)
   .on("tick", ticked);

 simulation.force("link")
   .links(graph.links);

 function ticked() {
   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; });
   }
  });

 function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
  }

 function dragged(d) {
   d.fx = d3.event.x;
   d.fy = d3.event.y;
 }

 function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
 }
 </script>

Answer 1

“标签”和“工具提示”之间存在混淆。传统上，我们将在没有用户交互的情况下显示在节点旁边的文本命名为“标签”，我们将在用户与节点交互（例如，悬停节点）时显示的文本命名为“工具提示”。

所以，如果您的意思是“标签”，这是一个解决方案：将节点附加为组...

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(d3.drag().on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

并将圆圈和标签（作为<text> 元素）附加到它们：

node.append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); });

node.append("text")
    .attr("dx", 6)
    .text(function(d) { return d.id; });

这是一个使用（大部分）您的代码的演示，并带有一个组成的数据：

var graph = {
nodes:[
	{"id": "A", "group": 1},
	{"id": "B", "group": 2},
	{"id": "C", "group": 2},
	{"id": "D", "group": 2},
	{"id": "E", "group": 2},
	{"id": "F", "group": 3},
	{"id": "G", "group": 3},
	{"id": "H", "group": 3},
	{"id": "I", "group": 3}
],
links:[
{"source": "A", "target": "B", "value": 1},
{"source": "B", "target": "C", "value": 1},
{"source": "A", "target": "D", "value": 1},
{"source": "H", "target": "E", "value": 1},
{"source": "I", "target": "F", "value": 1},
{"source": "A", "target": "G", "value": 1},
{"source": "B", "target": "H", "value": 1},
{"source": "A", "target": "I", "value": 1},
]
};

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
 .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

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


var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
						.attr("class", "node")
             .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));
						
node.append("circle")
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); });

 node.append("text")
 	.attr("dx", 6)
    .text(function(d) { return d.id; });

 simulation
   .nodes(graph.nodes)
   .on("tick", ticked);

 simulation.force("link")
   .links(graph.links);

 function ticked() {
   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("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
   }

 function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
  }

 function dragged(d) {
   d.fx = d3.event.x;
   d.fy = d3.event.y;
 }

 function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
 }

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.node circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

.node text{
	fill: #666;
	font-family: Helvetica
}

<svg width="400" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>