As was illustrated in this post: How to make force layout graph in D3.js responsive to screen/browser size
One can stipulate the height and width settings, relevant lines:
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.charge(-1600)
.linkDistance(45)
.size([w, h]);
But that post is from a long time ago and d3 has progressed since then. With v5, I'm unable to find documentation for where the size property is supposed to be toggled. I tried tacking it on in a similar place as earlier editions of d3, but that resulted in .size() is not a function in the console. V5:
const simulation = d3.forceSimulation(tree.descendants())
.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1))
.force("charge", d3.forceManyBody().strength(-10))
.force("x", d3.forceX(10))
.force("y", d3.forceY(0))
.tick(400)
.size([width,height]);
As you can seen, I also tried tinkering with forceX and forceY settings, but no matter how extreme I set the values it always ends up looking like a circle shape, not the landscape orientation I'm trying to prune it towards.
