d3.js - d3 单击以在元素位置居中内容或单击

Question

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

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

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

这是我的代码:

HTML(请注意，这是 React JSX 语法，但这应该与问题无关)

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

            </svg>
        </div>

java 脚本

    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" />

java 脚本

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