Intento hacer un organigrama con zoom y desplazamiento. Para hacerlo, necesito llamar a .nodeSize, que traduce mi "raíz" a (0,0). Luego lo vuelvo a traducir por ancho / 2 y está bien. Pero cuando implemento d3.zoom, mi "raíz" vuelve a (0,0) ... ¿Cómo puedo evitar este comportamiento?

Aquí está el código en cuestión:

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 + ")");

Gracias por leer

EDIT: hice un JSFiddle para que pueda probar mi código actual. No preste atención a los grandes traingles (no los tengo en mi proyecto real) =>https: //jsfiddle.net/rhz1n8m4/12