【d3.v4】怎么实现通过外部按钮触发svg的缩放

var svg = d3.select("#svg");
svg.call(
   d3.zoom().scaleExtent([0.5, 2]).on("zoom", zoomed) 
);
var zoomed = function(){
   d3.select(this).selectAll("g").attr("transform",   d3.event.transform);
}

外部按钮

d3.select("#button").on("click", function(){
    d3.zoom().scaleBy(svg, 1.1);
})

现在点击按钮，没有效果，没有触发zoomed方法，这应该怎么解决？

阅读 7.9k

let zoom = d3.zoom();
svg.call(zoom);

当调用上面代码时，d3应该会监听svg，把svg的缩放和平移的相关值放在zoom的transform的变量里。
运行一下面的demo，看看控制台的输出应该就能明白了。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
      <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
      <svg width="300" height="300"></svg>
      <br/>
      <button id="reset">Reset zoom</button>
      <button id="zoom">Zoom</button>
    <button id="translateX">Translate</button>
      <script>
    let svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
          
    let g = svg.append("g");
    
    g.append("text")
          .attr("x", width/2)
          .attr("y", height/2)
          .text("Text");
    
    let zoom = d3.zoom()
          .on("zoom", function(){ // zoom事件
              console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
              console.log(`D3: : ${d3.event.transform}`);
              g.attr("transform", d3.zoomTransform(svg.node()));
          });

    svg.call(zoom);

    d3.select("#reset")
          .on("click", function(d){
            svg.call(zoom.transform, d3.zoomIdentity);
        });
    d3.select("#zoom")
        .on("click", function(d) {
            zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });
    d3.select("#translateX")
        .on("click", function(d) {
            zoom.translateBy(svg, 10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });
      </script>
</body>

</html>

【d3.v4】怎么实现通过外部按钮触发svg的缩放

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

请问开发React Native，一般是推荐哪个主流的UI库呢？

快开发完的Vue3项目要做SEO该如何处理？