Javascript 在d3中标记力定向节点：速度与可见性

关于在d3力图中添加标签的另一个问题

我正在用单个组中的节点标记一个图，并在这些组中添加标签，如下所示：

<svg>
  <g class="nodes-with-labels">
    <g class="individual-node">
      <circle></circle>
      <text>Node Label</text>
    </g>
    ...
  </g>
</svg>

但是，这似乎要慢得多：它会创建更多的元素，并且需要两个转换语句，而不是

tick（）

语句中的一个，因为它会分别移动标签

---

速度是我的项目真正关心的问题。这里有没有更好的方法可以避免创建这么多额外的组和将

transform

语句加倍？

您不需要在

g

中设置每个标签和圆圈-只需直接在每个元素上设置transform属性。设置

cx

/

cy

和

x

/

y

属性，而不是转换属性，也可能是值得的

如果不需要图形来设置动画，则预计算刻度和设置变换有助于提高性能：

（var i=0；i<120；++i）模拟的

tick（）；

如果仍然太慢，请尝试在html元素上使用canvas（更快，因为它没有场景图）或css转换（更快，因为它们是）

<svg>
  <g class="nodes">
    <g class="individual-node">
      <circle></circle>
    </g>
    ...
  </g>
  <g class="labels">
    <g class="individual-label">
      <text>Node Label</text>
    </g>
    ...
  </g>
</svg>