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

Question

我有一个带有一堆不同节点的力导向图。每个节点都有一个单字或双字标签。

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

有没有办法根据标签大小改变节点的半径？

Answer 1

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

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

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

理论上，最好有一些系统的方法来确定每个字符平均占用多少，并用它来确定第二行中的乘数。 (即使使用固定宽度的字体，对于具有相同点大小的不同字体使用多少空间也有很大差异。)如果是我，那将是比它值得的更多工作。我可能只是在脚本顶部附近设置一个包含乘数的变量，并尽量记住在更改字体时更改它。

编辑:可以在 text 对象上使用函数 getBBox() 或 getBoundingClientRect() 之一(可能引用它作为 this) 来计算文本的大小。