javascript - 如何让 d3 显示我的文本标签？

Question

我正在使用 d3 制作力导向图，遵循示例 here 。这是我到目前为止所拥有的:

var width = 600,
  height = 600;

var svg = d3.select('#d3container')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

// draw the graph nodes
var node = svg.selectAll("circle.node")
  .data(mydata.nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .style("fill", "red")
  .attr("r", 12);

node.append("text")
  .attr("dx", 9)
  .attr("dy", ".35em")
  .text(function(d) {
    return d.label
  });

// draw the graph edges
var link = svg.selectAll("line.link")
  .data(mydata.links)
  .enter().append("line")
  .style('stroke', 'black')
  .style("stroke-width", function(d) {
    return (d.strength / 75);
  });

// create the layout
var force = d3.layout.force()
  .charge(-220)
  .linkDistance(90)
  .size([width, height])
  .nodes(mydata.nodes)
  .links(mydata.links)
  .start();

// define what to do one each tick of the animation
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; });
  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});

// bind the drag interaction to the nodes
node.call(force.drag);

这正确地选择了我的 d.label并附加 <text>到包含正确文本标签的节点(svg 圆圈)。按照这个例子，我的CSS是:

.node text { 
    pointer-events: none; 
    font: 10px sans-serif; 
} 

但是文本标签不显示。我在这里做错了什么？

Answer 1

请注意，对于下面的答案，我假设您的数据与示例不同，并且您有一个 label 属性(在示例中为名称)。

也就是说，您正在生成无效的 SVG。您不能拥有一个带有 text 子元素的 circle，您需要将它们包装在 g 中:

// draw the graph nodes
var node = svg.selectAll("circle.node")
  .data(mydata.nodes)
  .enter()
  .append("g");

node.append("circle")
  .attr("class", "node")
  .style("fill", "red")
  .attr("r", 12);

node.append("text")
  .attr("dx", 9)
  .attr("dy", ".35em")
  .text(function(d) {
    return d.label;
  });

示例 here .