Question

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

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

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

这会为图表添加最少的额外元素，并允许我的图形tick()函数只调用一个transform操作。我在这里设置了一个演示小提琴（没有任何移动/ 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中的每个标签和圈子 - 只需在每个元素上直接设置转换属性即可。设置cx / cy和x / y属性而非进行转换也可能值得进行分析。

如果您不需要图表进行动画处理，预先计算刻度并设置变换可能有助于提高性能：

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

如果这仍然太慢，请尝试使用画布（更快，因为它没有场景图）或css转换html元素（更快，因为它们是gpu accelerated）。

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

1 个答案: