const container = document.getElementById("container");
const svgElement = d3.select(container).append("svg")
// Get the width and height computed by CSS.
let width = container.clientWidth;
let height = container.clientHeight;
const colorScale = d3.scaleOrdinal(d3.schemeCategory20);
const forceSimulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width/2, height/2));
function redraw(){
console.log("The window is being redrawn");
width = container.clientWidth;
height = container.clientHeight;
forceSimulation.force("center", d3.forceCenter(width/2, height/2));
// Set the size of the SVG element based on the extracted dimensions.
svgElement
.attr("width", width)
.attr("height", height);
}
// Redraw when the browser window is resized.
window.addEventListener("resize", redraw);
I'm currently working on making a responsive window with the above code. The forceSimulation adjusts its center a few times before it stops responding to window resizing. I've included the statement:
console.log("The window is being redrawn");CSS detects each window resize. However, the behavior is as follows:
Initial call to function redraw
https://i.sstatic.net/ptAEb.png
Window resizing works
https://i.sstatic.net/q4lOs.png