javascript - D3 : Unable to append the labels to example's circle version

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，但父级已经被翻译。下面用一张图来说明: