d3單擊中心內容位置的元素或單擊

Question

我一直在試圖獲得如何使pannable可縮放的基本知識，並單擊中心放大元素d3工作。這個例子就是我想要做的，但我有麻煩翻譯它的地理環境之外：https://bl.ocks.org/mbostock/2206340

我已經完成的前兩個部分的平移和縮放，看到這裏基本小提琴https://jsfiddle.net/e9fbn2xp/

如何我可以完成將可見窗口中心的圓心居中嗎，看起來像圓圈被放大了嗎？請注意，雖然這是一個固定的位置圓，我最終會獲得動態數據，所以理想情況下我可以動態地引用圓圈位置。

這裏是我的代碼：

HTML（注意，這是陣營JSX語法，但應該是無關的問題）

 <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

我得到了一個有效的解決方案並認爲我會分享代碼以防其他人發現它有用。這是一個相當不同的方法，然後我的原始，但實現了三個目標，平移，鼠標縮放，縮放元素。雖然這些是三個簡單的靜態圓圈，但同一個概念應該與動態數據集一起工作。

小提琴：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))}); 
    }