Question

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

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

>>>df.groupby(['col1'])['col2', 'col4'].mean()

      col2       col4
col1                 
A       25   9.000000
B       11  13.000000
F       25  20.333333

>>>df.groupby(['col1','col3'])['col2', 'col4'].mean()

           col2  col4
col1 col3            
A    R       25     9
B    T       11    13
F    E       25    27
     R       25    17

我只提了一个引用事件变焦的代码示例。

现在我想问一下，如何用其他类型的事件更改我的代码中的比例（例如，当我按下一个按钮时，我想回到位置x：0，y：0并缩放k： 1）？

到目前为止，我已经研究过D3V4源代码了，我在debuger中找到了ZoomEvent使用的一些函数，但是我无法从我的代码中调用它们。

然后我也尝试用以下方法直接修改参数：

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

这样可行，但只要我用鼠标创建缩放事件，库D3就会返回旧的比例。

谢谢你，祝你好运

Answer 1

您可以使用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>

scale SVG d3.js（无事件）

1 个答案: