javascript - 在 d3 : speed vs visibility 中标记力导向节点

Question

关于向 d3 力图添加标签的另一个问题...

我正在用各个组内的节点标记一个图，并且我一直在这些组内附加标签，如下所示:

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

这向图形添加了最少的额外元素，并允许我的图形的 tick() 函数仅调用一个 transform 操作。我在这里放了一个演示 fiddle (没有任何移动/tick() 函数): https://jsfiddle.net/52cLjxt4/1/

不幸的是，标签最终位于许多节点之后，因为它们所在的组在包含节点的其他组之前绘制。这个问题可以通过将节点和标签放入单独的父组来解决，如 this example :

https://jsfiddle.net/hhwawm84/1/

<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>

但是，这似乎要慢得多:它创建了更多元素并且需要两个转换语句而不是 tick() 语句中的一个，因为它单独移动标签。

速度是我的项目真正关心的问题。这里有没有更好的方法可以避免创建这么多额外的组并加倍 transform 语句？

Answer 1

您不需要 g 中的每个标签和圆圈- 直接在每个元素上设置 transform 属性。也可能值得分析设置 cx/cy和 x/y属性而不是转换。

如果您不需要图形动画，预先计算刻度并设置转换可能有助于提高性能:

for (var i = 0; i < 120; ++i) simulation.tick();


如果仍然太慢，请尝试使用 Canvas (更快，因为它没有场景图)或 html 元素上的 css 转换(更快，因为它们是 gpu accelerated )。