drawChart = ([state, nodes]) => {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width * 1.5, height * 2.2]);
const node = svg
.selectAll(".node")
.data(nodes)
.join("circle")
.attr("r", d => d.r)
.style("fill", d => (d.match == "TRUE" ? "blue" : "lightblue"))
.style("opacity", d => (d.match == "TRUE" ? "1" : "0.5"))
.classed("node", true);
const simulation = d3
.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(5))
.force(
"collide",
d3
.forceCollide()
.radius(d => d.r + 2)
.iterations(4)
)
.force("center", d3.forceCenter(width / 1.5, height / .9))
.on("tick", tick);
function tick() {
node.attr("cx", d => d.x).attr("cy", d => d.y);
}
return svg.node();
}