Question

我按照示例here使用d3制作了力导向图。这就是我到目前为止所拥有的：

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。您的circle孩子不能text，您需要将其包裹在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。

如何让d3显示我的文字标签？

1 个答案: