d3 Klicken Sie, um den Inhalt an der Position des Elements zu zentrieren, oder klicken Sie

Question

Ich habe versucht, die Grundlagen zu bekommen, wie ich eine pannable zoombare machen, und klicken Sie, um Zoom auf Element d3 Arbeit zu zentrieren. In diesem Beispiel ist das, was ich tun möchte, aber ich Schwierigkeiten habe es außerhalb des geo Kontext übersetzen: https://bl.ocks.org/mbostock/2206340

Was ich erreicht habe, ist die ersten beiden Teile Schwenken und Zoomen, eine Grund Geige sehen hier https://jsfiddle.net/e9fbn2xp/

Wie kann ich erreichen, dass der Kreis in der Mitte des sichtbaren Fensters zentriert wird, sodass der Kreis wie angezoomt aussieht? Beachten Sie, dass, obwohl dies ein fester Positionskreis ist, ich eventuell dynamische Daten haben werde, also könnte ich idealerweise die Position der Kreise dynamisch beziehen.

Hier ist mein Code:

HTML (beachten Sie, dass dies JSX Syntax reagieren, aber das sollte die Frage irrelevant sein), um eine Arbeitslösung erhielt

 <div style={{width: 800}}> 
      <svg style={{border: '1px solid black'}} id="viz" width="800" height="800"> 

      </svg> 
     </div> 

JAVASCRIPT

var svg = d3.select("#viz") 
    var width = svg.attr("width"); 
    var height = svg.attr("height"); 

    var testLayer = svg.append('g');  
    var aRect = testLayer.append("rect")  
    .attr("x", 0)   
    .attr("y", 0)   
    .attr("height", 800)  
    .attr("width", 800) 
    .attr("fill", 'green'); 

    var aCircle = testLayer.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", 40) 
    .attr("cx", 200) 
    .attr("cy", 200) 
    .on("mousedown", zoomToMe); 

    function zoomToMe(){ 
     console.log("do the zoom") 
    } 

    var zoom = d3.zoom() 
    .scaleExtent([.5, 40]) 
    .translateExtent([[0, 0], [width, height]]) 
    .on("zoom", zoomed); 

    svg.call(zoom); 

    function zoomed() { 
    testLayer.attr("transform", d3.event.transform); 
    } 

    svg.on("click", function() { 
     var coords = d3.mouse(this); 
    }) 

Answer 1

I und dachte, ich würde den Code teilen, falls andere ihn für nützlich halten. Es ist ein ziemlich anderer Ansatz als mein Original, aber erfüllt die drei Ziele, Pan, Maus Zoom, Zoom auf Element. Während dies drei einfache statische Kreise sind, sollte das gleiche Konzept mit einem dynamischen Dataset funktionieren.

Geige: https://jsfiddle.net/uc7oprx3/5/

HTML

<svg id="viz" width="400" height="400" /> 

JAVASCRIPT

var zoom = d3.zoom() 
    .scaleExtent([0.3,2]) 
    .on("zoom", zoomed); 

    var svg = d3.select("#viz") 

    var width = svg.attr("width"); 
    var height = svg.attr("height"); 

    var zoomer = svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all") 
    .call(zoom); 

    var g = svg.append("g"); 

    var aCircle = g.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", 40) 
    .attr("cx", 200) 
    .attr("cy", 200) 
    .on("mousedown",() => centerNode(200, 200)); 

    var bCircle = g.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", 40) 
    .attr("cx", 400) 
    .attr("cy", 400) 
    .on("mousedown", () => centerNode(400, 400)); 

    var cCircle = g.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", 40) 
    .attr("cx", 600) 
    .attr("cy", 600) 
    .on("mousedown", () => centerNode(600, 600)); 

    function zoomed() { 
    g.attr("transform", d3.event.transform); 
    } 

    function centerNode(xx, yy){ 
    g.transition() 
    .duration(500) 
    .attr("transform", "translate(" + (width/2 - xx) + "," + (height/2 - yy) + ")scale(" + 1 + ")") 
    .on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate((width/2 - xx),(height/2 - yy)).scale(1))}); 
    }