Learn D3.js

Canvas rendering

Force simulations frequently have thousands of nodes, and this can make it run choppy or freeze your browser. One of the main optimization strategies you can use is to draw the simulation using HTML Canvas, instead of SVG. This will make it harder to add interactive features, such as highlighting and dragging, because you won't be able to use selections. But the gain in performance may be worth the trouble.

The following example is an implementation of the last example using Canvas. First, you need to obtain the Canvas context and translate it to the middle of the chart. Since we can't use CSS, the default strokeStyle and lineWidth properties are also set for the context:

const canvas = d3.select("body").append("canvas") ...