D3.js d3单击以将内容置于元素位置的中心，或单击

我一直在尝试获取如何使可平移可缩放的基础知识，并单击以使d3元素的缩放居中工作。这个例子正是我想做的，但我在地理环境之外翻译它时遇到了困难：

我完成的是前两部分的平移和缩放，请看这里的基本小提琴

如何将圆居中放置在可视窗口的中心，使其看起来像是缩放到的？请注意，虽然这是一个固定位置的圆，但我最终会有动态数据，因此理想情况下，我可以动态地引用圆的位置

这是我的密码：

HTML（请注意，这是React JSX语法，但这与问题无关）

---

我得到了一个可行的解决方案，我想我会分享代码，以防其他人发现它有用。这是一种与我最初的方法完全不同的方法，但它实现了三个目标：平移、鼠标缩放和缩放到元素。虽然这是三个简单的静态循环，但相同的概念应该适用于动态数据集

小提琴：

HTML

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

            </svg>
        </div>

    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);
    })

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

    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))});
    }