D3 在移动专利诉讼中将节点标签放置在圆圈内

Question

我是 D3 的新手，我正在使用此模板 (http://bl.ocks.org/mbostock/1153292) 可视化我的图表。但是，我的节点的标签是岸边的，我想将它们放在圆圈内而不是在它们的右侧。有人可以帮我吗？

非常感谢

Answer 1

在组元素内追加圆圈和文本，并使用文本锚属性将文本居中对齐。

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 属性的长度增加圆的半径。请注意，这次您必须更新 link 目标位置，以调整相对于圆半径的标记位置。

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 在移动专利诉讼中将节点标签放置在圆圈内

D3 placing nodes labels inside circles in Mobile Patent Suits

d3.js