[Solved]-D3 force layout in Canvas: adding & updating nodes (& links)-d3.js

There's a really good post that someone put together about using canvas called Working with D3.js and Canvas.

In short I'd recommend doing some data-binding into some dummy HTML, and using the results of this to render your output.

First create a fake DOM element that you can use

const fakeContainer = d3.select(document.createElement("custom"));

Now data-bind to it. Note, only create it the once, re-use it for re-renders.

const join = fakeContainer
        .selectAll("circle")
        .data(myData);

join.exit().remove();
join.enter().append("circle");

Then when it comes to rendering:

fakeContainer.each(function(d) {
    // Render a canvas circle
});