Xtykutl

I try to make an orgchart with zoom and paning. To do so I need to call .nodeSize which translate my "root" to (0,0). Then I re-translate it by width/2 and it's ok. But when I implement d3.zoom, my "root" go back to (0,0)... How can i avoid this behavior ?

Here is the code concerned :

var svg = d3.select("#svg1").append("svg")

  .attr("width", width)

  .attr("height", height)

  .call(d3.zoom().on("zoom", function () {

  svg.attr("transform", d3.event.transform);

  }))

  .append('g').attr("transform","translate(" + width / 2 + "," + 0 + ")");

Thanks for reading.

EDIT : I did a JSFiddle so you can try my current code. Don't pay attention to big traingles (I don't have them on my real project) =>
https://jsfiddle.net/rhz1n8m4/12/

Apply the zoom to a node below the width/2 transform.

Rename your vars to reflect what they contain: svg does not contain the svg element.

var svg = d3.select("#svg1").append("svg")

.attr("width", width)

.attr("height", height)

.call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform); }))

.append('g').attr("transform","translate(" + width / 2 + "," + 0 + ")")

.append('g');