Zentrierung der Svg-Komponente nach der Zoom-Funktion in d3js

Question

Ich benutze d3js, um einen Baum zu bauen, weil die Baumgröße sehr groß ist, und mein Container ist klein, so kann das Div die Svg-Komponente beim Laden der Seite nicht zeigen diese image on load

um den Baum zu zeigen, muss ich die Ansicht vergrößern und ziehen Sie die sVG-Komponente, wie dieses zoomed image

gibt es eine Möglichkeit, die svg Komponente innerhalb des sVG, wenn die Seite Last zu zentrieren ?

hier ist mein Code

<style> 

     .node circle { 
      fill: #fff; 
      stroke: steelblue; 
      stroke-width: 1.5px; 
     } 

     .node { 
      font: 10px sans-serif; 
     } 

     .link { 
      fill: none; 
      stroke: #ccc; 
      stroke-width: 1.5px; 
     } 

     </style> 
      <!--<img src="../image/dummy5.svg" style='width:100%;margin:3px 0;'/>--> 
      <script src="http://d3js.org/d3.v3.min.js"></script> 
      <!--******* vertical *******--> 
      <script> 
      var treeData = [ 
      <?php echo "{'name' : 'CDS','icon': '../image/logo.png','padding':'0','user_id': 'CDS','level':'CDS','children' : ["; echo get_node_ul_frm_adm ($DBconn, 1); echo "]}"; ?>]; 

      var width = $("#agent-tree").width(), 
       height = 2200; 

      var cluster = d3.layout.tree() 
       .nodeSize([100, 200]) 
       .separation(function(){ 
       return .5; 
       }) 
       .size([height, width - 160]); 

      var zoom = d3.behavior.zoom().on("zoom", function() { 
       svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") 
       }) 

      var svg = d3.select("#agent-tree").append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .attr("object-fit", "cover") 
       .call(zoom) 
       .append("g") 
       .attr("transform", "translate(40,0)"); 
       root = treeData[0]; 
      var nodes = cluster.nodes(root).reverse(); 
      nodes.forEach(function(d) { d.y = d.depth * 100; }); 
      var link = svg.selectAll(".link") 
       .data(cluster.links(nodes)) 
       .enter().append("path") 
       .attr("class", "link") 
       .attr("d", elbow); 

      var node = svg.selectAll(".node") 
       .data(nodes) 
       .enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 

      node.append("circle") 
       .attr("transform", function(d) { return "translate(0,"+d.padding+")"; }) 
       .attr("r", 12.5); 

      function elbow(d) { 
      return "M" + d.source.x + "," + d.source.y 
       + "H" + ((d.target.x-d.source.x)/2,d.source.x) 
       + "V" + d.target.y 
       + "H" + d.target.x 
       + "v" + ((d.source.y-d.target.y)/2,42); 
      } 
      </script> 

Answer 1

durch jeden Knoten auf dem Baum gehen und die kleinsten und größten Werte x und y jedes ihrer entsprechenden Begrenzungsboxen erhalten.

var smallestBiggestDim = { 
    smallX : "", 
    smallY : "", 
    bigX : "", 
    bigY : "" 
} 
nodes.each(function(d, i){ //loop through tree nodes 
    var thisBBox = d3.select(this).node().getBBox(); //get bbox of current node 
    if(i == 0){ 
    //if i = 0, none are set, so set them 
    smallestBiggestDim.smallX = thisBBox.left; 
    smallestBiggestDim.smallY = thisBBox.top; 
    smallestBiggestDim.bigX = thisBBox.left + thisBBox.width; 
    smallestBiggestDim.bigY = thisBBox.top + thisBBox.height; 
    } else { 
    //check values and set if bigger or smaller 
    if(smallestBiggestDim.smallX > thisBBox.left){ smallestBiggestDim.smallX = thisBBox.left } 
    if(smallestBiggestDim.smallY > thisBBox.top){ smallestBiggestDim.smallY = thisBBox.top } 
    if(smallestBiggestDim.bigX < thisBBox.left + thisBBox.width;){ smallestBiggestDim.bigX = thisBBox.left + thisBBox.width; } 
    if(smallestBiggestDim.bigY < thisBBox.top + thisBBox.height;){ smallestBiggestDim.bigY = thisBBox.top + thisBBox.height; } 
} 
}) 

Das Obige erhält die Bounding Box von jedem Knoten und prüft auf die kleinsten und größten x und y Werte.

Dann verwenden Sie diese Abmessungen zusammen mit der Breite und Höhe Ihrer Svg, um den Zoom zu erarbeiten.

einfach tun, trainieren die neue Breite und Höhe:

var newWidth = smallestBiggestDim.bigX - smallestBiggestDim.smallX; 
var newHeight = smallestBiggestDim.bigY - smallestBiggestDim.smallY; 

Sagen Sie Ihre berechnete rect 300 war x 300 und Ihre Breite und Höhe Ihres svg betrug 200 x 200. Sie die Waage zu berechnen, was Sie tun würden :. sowohl die Breite und Höhe passen in

var scale = Math.max(rectWidth/svgWidth, rectHeight/svgHeight); 
//which is 
var scale = Math.max(300/200, 300/200); 

ich benutze Math.max wie Sie nur einen Skalenwert haben, so dass Sie den maximalen Wert erhalten müssen

so würde die Waage jetzt sein: So auf Last

var newScale = 1.5 

würden Sie verkleinern etwa so:

svg.attr('transform', 'scale(' + newScale + ')'; 

Das sollte funktionieren :)