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不允许您将文本元素放在圈子中。实际上，您无法将任何内容附加到圆圈，rects，路径等。更好的方法是为每个点附加一个组，将其转换为适当的位置，并在其中放置一个圆圈和一个文本元素。这是相关的代码。

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

D3.js - 在强制导向图中向节点添加文本

1 个答案: