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