d3 单击以将内容居中放置在元素的位置或单击

Question

我一直在尝试了解如何制作可平移缩放的基础知识，以及如何在元素 d3 上单击以居中缩放。这个例子是我想做的，但我在将它翻译到地理环境之外时遇到了问题：https://bl.ocks.org/mbostock/2206340

我完成的是前两部分的平移和缩放，请在此处查看基本的fiddlehttps://jsfiddle.net/e9fbn2xp/

我怎样才能使圆圈居中于可视区域 window 的中心，使圆圈看起来像被放大了？请注意，虽然这是一个固定位置的圆，但我最终会得到动态数据，因此理想情况下我可以动态引用圆的位置。

这是我的代码：

HTML（请注意，这是 React 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

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

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

d3 单击以将内容居中放置在元素的位置或单击

d3 click to center content at position of element or click

center

zooming

pan

d3.js