Drawing reference knots at d3: speed versus visibility
Another question about adding labels to the d3 strength graph ...
I am labeled with a graph with nodes that are inside separate groups, and I added labels inside those groups like this:
<svg>
<g class="nodes-with-labels">
<g class="individual-node">
<circle></circle>
<text>Node Label</text>
</g>
...
</g>
</svg>
This adds minimal extra elements to the graph and allows my graph function to tick()
simply call one operation transform
. I found a demo script here (no move function / tick()
):
https://jsfiddle.net/52cLjxt4/1/
Unfortunately, labels fall behind many nodes because they are in groups that are drawn in front of other groups that contain nodes. This problem can be solved by placing nodes and labels in separate parent groups, for example in 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>
However, this looks significantly slower: it creates more elements and requires two conversion operators instead of one in the statement tick()
, as it moves the labels around separately.
Speed is a major issue for my project. Is there a better approach here that can avoid creating so many extra groups and doubling operators transform
?
source to share
You don't need every label and circle in g
- just set the transform attribute directly on each element. Profiling may also be required to set the cx
/ cy
and x
/ attributes y
instead of transform.
If you don't need a graph for animation, pre-calculating ticks and adjusting transformations can help with performance:
for (var i = 0; i < 120; ++i) simulation.tick();
If it's still too slow, try using canvas (faster because it doesn't have a scene graph), or css converts the html elements (faster because they're gpu accelerated ).
source to share