Question

我是D3的新手，我使用此模板（http://bl.ocks.org/mbostock/1153292）来显示我的图表。但是，我的节点＆＃39;标签是岸边的，我想把它们放在不在右手边的圆圈内。有人可以帮我吗？

非常感谢

Answer 1

在组元素中添加圆圈和文本，并使用text-achor属性将文本与中间对齐。

var nodes = svg.selectAll(".node")
    .data(force.nodes())
    .enter()
    .append("g")
    .attr("class","node")
    .call(force.drag);

var circles = nodes.append("circle")
    .attr("r", 6);

var texts = nodes.append("text")
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.name;
    });

更改刻度函数，如下所示。

function tick() {
  path.attr("d", linkArc);
  nodes.attr("transform", transform);     
}

<强>更新

JSFiddle 1用于将文字与中心对齐。

如果要将文本标签括在圆圈内，请使用name属性的长度增加圆的半径。请注意，此时您必须更新链接目标位置，以相对于圆半径调整标记位置。

var circles = nodes.append("circle")
   .attr("r", function(d){ d.radius = d.name.length*3; return d.radius; }
);

function linkArc(d) {
    var tX = d.target.x-d.target.radius,
      dx = tX - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + tX + "," + d.target.y;
}

JSFiddle 2

D3将节点标签放置在移动专利套装中的圆圈内

1 个答案: