Question

注意：请不要在没有引导到适当位置的情况下关闭它。到目前为止已经尝试了几乎所有已知的解决方案

我一直在尝试为力导向图的每个节点添加标签，如this example所示。

到目前为止，我可以将标签添加到图表的力导向版本，但是当转换为圆形变体时，节点上的节点和标签都不会转换或转换。请帮我弄清楚我做错了什么，并且欢迎任何进一步改进它的建议。

样式：

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

   .link {
      stroke: #999;
    }
   .label {
      font-family: sans-serif;
      font-size: 10px;
      fill: #000; 
      pointer-events: none; 
      stroke-width: 0;
    }

节点和文本代码：

var node = svg.selectAll(".node")
          .data(graph.nodes)
        .enter().append("g")
          .attr("class", "node")
            .on("mouseover", fade(.1, true))
            .on("mouseout", undoFade())
          .call(force.drag);
    node.append("circle")
          .style("fill", function(d) { return color(d.group); })
          .attr("r", 5);
 node.append("text")
            .attr("text-anchor", "middle")
            .attr("dy", ".35em")
            .attr("y", -22)
            .attr("class", "label")
            .text(function(d) { return d.name });

节点转换代码：

node.attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; });

圈子代码：

var circle = svg.selectAll('.node')
                .transition().duration(1000)
                  .attr('cx', function(d,i){ return x_scale(Math.sin(index_to_rad(i))); })
                  .attr('cy', function(d,i){ return y_scale(Math.cos(index_to_rad(i))); });

Answer 1

您对节点进行了太多翻译。如果你想让事情发生变化：

node
    .transition()
    .duration(1000)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

并将圆圈代码修改为：

var circle = svg.selectAll('.node');

这将在动画中同时转换圆圈（和标签），同时保持它们对齐。从本质上讲，你只是在远离标签时翻译你的圈子。执行此操作会使您的圈子保持默认0,0，但父级已经翻译过来。这是一个图表来说明：

D3：无法将标签附加到示例的圆圈版本

1 个答案: