D3js V4-Center-Knoten in Zoombaren Baum

Ich habe festgestellt, das Beispiel von Rob Schmuecker für die Zentrierung eines Knotens in einem Baum, auf den geklickt wurde. Dieses Beispiel funktioniert mit D3js version 3. Ich portiert dieses Beispiel d3js version 4. Aber in meinem Beispiel der svg-Sprung wird nach Zentrierung, wenn ich versuche zu bewegen svg. Weiß jemand was falsch läuft? Hier einige code snippets.

var baseSvg = d3.select("#tree-container").append("svg").attr("width", viewerWidth)
                                                        .attr("height", viewerHeight)
                                                        .attr("class", "overlay")
                                                        .call(zoomListener);

function zoom() {
  if(d3.event.transform != null) {
    svgGroup.attr("transform", d3.event.transform );
  }
}

function centerNode(source) {
  t = d3.zoomTransform(baseSvg.node());
  x = -source.y0;
  y = -source.x0;
  x = x * t.k + viewerWidth / 2;
  y = y * t.k + viewerHeight / 2;
  d3.select('g').transition().duration(duration).call( zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k) );
}
InformationsquelleAutor Tokker | 2017-03-02



One Reply
  1. 5

    Änderung der Auswahl innerhalb der centerNode von ‚g‘ zu ’svg‘ scheint den trick tun. Dies ist wahrscheinlich, weil die zoom-listener wird aufgerufen, auf dem svg-element.

    Referenz, die centerNode-Funktion würde nun wie folgt Aussehen:

    function centerNode(source) {
      t = d3.zoomTransform(baseSvg.node());
      x = -source.y0;
      y = -source.x0;
      x = x * t.k + viewerWidth / 2;
      y = y * t.k + viewerHeight / 2;
      d3.select('svg').transition().duration(duration).call( zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k) );
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.