Question

我有一组带有各种节点的力导向图。每个节点都有一个单词或双字标签。

我在组元素中有svg圈和文本标签。我计划对标签进行样式设置，使其与节点重叠。我的问题是，大多数时候，文本会溢出节点。

是否有根据标签大小更改节点的半径？

Answer 1

假设nodes包含您的g组，您已将数据绑定到它们，并且标签文本字符串位于属性name中。当您告诉d3将text元素添加到g组时，您可能使用了此字符串。添加圆圈时，可以使用相同的绑定数据配置圆圈。这样的事情应该有效：

nodes.append("circle")
     .attr("r", function(d) {return d.name.length * 2.5;})
     ... more stuff here.

第二行是关键。我只是根据标签文本的长度设置圆半径。我使用2.5作为基于试验和错误的乘数与10pt类型的默认san-serif。

理论上，最好有一些系统的方法来确定每个角色平均占用多少，并用它来确定第二行的乘数。（即使使用固定宽度的字体，对于具有相同磅值的不同字体，使用多少空间也会有很多变化。）如果是我，那将是更多的工作而不是它的价值。我可能只是设置一个包含脚本顶部附近的乘数的变量，并尝试记住在我更改字体时更改它。

编辑：可以使用getBBox()对象上的一个函数getBoundingClientRect()或text（可能将其引用为this）来确定大小文本。

Answer 2

尝试使用getComputedTextLength()。

来自Mike Bostock： http://bl.ocks.org/mbostock/1846692

node.append("text")
  .text(function(d) { return d.name; })
  .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })

这允许您使用文本填充圆圈而不会溢出。我不完全确定数字来自哪里 - 也许有人可以更好地解释。

或者，您可以使用此example中的getBBox()（以及火星的其他答案），但您还需要对圆圈进行一些计算。您可以使用.attr("text-anchor", "middle")和某些几何图形来完成此操作。

希望这有帮助。

d3.js基于标签文本的大小节点

2 个答案: