缩放SVG d3.js(无事件）

scale SVG d3.js (no event)

本文关键字：事件 js SVG d3 缩放      更新时间：2023-09-26

这是我的第一篇文章，我希望不会出错。我正在使用d3.js库，有问题

现在放置我用来创建SVG(d3(的基本代码。

var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
transform = d3.zoomIdentity;;
var g = svg.append("g");
svg.call(d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed));
function zoomed() {
    g.attr("transform", d3.event.transform);
}

我只举了一个代码示例，它引用了Event Zoom。

现在我想问，如何用另一种类型的事件更改代码中的比例(例如，当我按下按钮时，我想回到位置x:0、y:0和比例k:1(？

到目前为止，我已经对D3V4源代码进行了大量研究，并在调试器中发现了ZoomEvent使用的一些函数，但我无法从代码中调用它们。

然后我也尝试直接修改参数：

g.attr("transform", "translate(0,0) scale(1)");

这是可行的，但一旦我用鼠标创建缩放事件，库D3就会返回到旧的比例。

谢谢你和美好的一天

您可以为此使用zoom.transform(使用d3.zoomIdentity(，它将触发相应的事件来更新转换的状态：

完整示例：

<!DOCTYPE html>
<html>
<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg width="300" height="300"></svg>
  <br/>
  <button>reset zoom</button>
  <script>
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
      
    var g = svg.append("g");
    
    g.append("text")
      .attr("x", width/2)
      .attr("y", height/2)
      .text("Something to zoom...");
      
    var zoom = d3.zoom()
      .scaleExtent([1 / 2, 8])
      .on("zoom", zoomed);
    svg.call(zoom);
    function zoomed() {
      g.attr("transform", d3.event.transform);
    }
    
    d3.select("button")
      .on("click", function(d){
        svg.call(zoom.transform, d3.zoomIdentity);
      })
  </script>
</body>
</html>

相关文章：