1

In d3 v5 (or 6!) what’s the code needed to

  1. get my force layout to be automatically centered in my SVG (on start at least)?
  2. get the zoom level defined dynamically to keep all nodes inside the visible SVG (on start at least)?

I’m considering to check the position of each node at each frame and react accordingly, but it looks way too ressource consuming.

Many thanks for your help!

Le Sparte
  • 163
  • 2
  • 12
  • As for zooming and panning appropriately, you could try the solutions [here](https://stackoverflow.com/q/49960250/7106086) - they're v4, which will also work in v5, and with some minor tweaks, in v6. – Andrew Reid Sep 04 '20 at 17:04
  • (that is to say zooming and panning automatically to keep all nodes visible) – Andrew Reid Sep 04 '20 at 18:40
  • Thanks Andrew! Translates now works on zooming, but not on start. Any idea? const svg = d3.select('div#netowrk') .append("svg") .attr("width") .attr("height") .call(d3.zoom().on("zoom", () => { svg.attr("transform", d3.event.transform) })) .call(d3.zoom().transform, d3.zoomIdentity .translate(width/2,height/2) .scale(0.2)) .append("g") // doesn't work .attr("transform","scale(0.2)") .attr("transform","translate(width/2,height/2)") – Le Sparte Sep 05 '20 at 10:16
  • Better seen here (just the js code on JSFiddle) : https://jsfiddle.net/f4ksLzcr/ I must be writing something wrong. – Le Sparte Sep 05 '20 at 10:17

0 Answers0