d3 单击以在元素位置居中内容或单击答案

【问题标题】：d3 click to center content at position of element or clickd3 单击以在元素位置居中内容或单击
【发布时间】：2017-09-02 15:10:28
【问题描述】：

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

我已经完成了前两部分的平移和缩放，这里有一个基本的小提琴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>

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

【问题讨论】：

标签： d3.js zooming center pan

【解决方案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))});
    }

【讨论】：