D3.js-向力向圖中的節點添加文本

Question

我正在創建一個力向圖，我想向圖節點添加文本。

我可以在控制台中看到文本元素被附加到圓上，但是它沒有任何價值。

該圖的代碼如下：

    var force = d3.layout.force()
            .charge(-120)
            .linkDistance(40);

    var width = $(document).width() - 550;
        height = $(document).height() - 300;

    var colour = d3.scale.category20();

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("style", "outline: thin solid black;");

    force
        .size([width, height])
        .nodes(convertedInfo.nodes)
        .links(convertedInfo.links)
        .start();

    //Adding nodes and data
    var link = svg.selectAll("link")
      .data(convertedInfo.links)
      .enter()
      .append("line")
      .attr("stroke-width", 3)
      .attr("class", "link")
      .attr("stroke", "grey");

    var node = svg.selectAll("node")
      .data(convertedInfo.nodes)
      .enter()
      .append("circle")
      .attr("r", 7)
      .attr("class", "node")
      .style("fill", function(d) {return colour(d.domain_count);})   
      .append('text');

      var text = svg.selectAll("text")
      .data(convertedInfo.nodes)
      .enter()
      .append("text")
      .attr("x", function(d) { return d.cx; })
      .attr("y", function(d) { return d.cy; })
      .text('text')
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
      .attr("fill", "red");

    //Fisheye view
    var fisheye = d3.fisheye.circular()
      .radius(70)
      .distortion(2);

    svg.on("mousemove", function() {
      fisheye.focus(d3.mouse(this));

    node.each(function(d) { d.fisheye = fisheye(d); })
      .attr("cx", function(d) { return d.fisheye.x; })
      .attr("cy", function(d) { return d.fisheye.y; })
      .attr("r", function(d) { return d.fisheye.z * 4.5; });

    link.attr("x1", function(d) { return d.source.fisheye.x; })
      .attr("y1", function(d) { return d.source.fisheye.y; })
      .attr("x2", function(d) { return d.target.fisheye.x; })
      .attr("y2", function(d) { return d.target.fisheye.y; });
    });

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

    });

現在，我只是在text值中放置一個占位符，以便查看它是否有效。

該代碼有什么問題？

Answer 1

SVG不允許您將文本元素放入圓內。 實際上，您不能將任何東西附加到圓，矩形，路徑等上。更好的方法是為每個點附加一個組，將其平移到適當位置，然后在其中放置一個圓和一個文本元素。 這是相關的代碼。

var node = svg.selectAll("g.node")
  .data(convertedInfo.nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d){
    return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")";
  })
  .each(function(d){ d.fisheye = fisheye(d); });

node.append("circle")
  .attr("r", 7)
  .style("fill", function(d) {return colour(d.domain_count);}) ;

node.append("text")
  .text("text")
  .attr("x", 3.5)
  .attr("y", 3.5)
  .attr("text-anchor", "middle");

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