Mike Bostock（D3js 的创建者）的平移和缩放示例如何工作？答案

【问题标题】：How does Mike Bostock's (D3js's creator) pan & zoom example work?Mike Bostock（D3js 的创建者）的平移和缩放示例如何工作？
【发布时间】：2017-08-09 14:02:58
【问题描述】：

我很难理解这个例子： https://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45

我理解一般概念，图中的所有点都放入svgg-元素中，这很有用，因为现在您可以对组应用变换并相应地缩放所有点。这会转换这些点所在的整个坐标系。但这对于为平移传递的鼠标坐标无关紧要，因为这些坐标来自svg 中不可见的rect，不会被转换。

我不明白的是：

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

function zoomed() {
  g.attr("transform", d3.event.transform);
}

.call 是默认svg-rectangle 的成员函数吗？它在这里做什么？ And d3.zoom 根据文档是“行为”。这是什么意思，这两者之间的耦合如何在这里起作用？函数.on 的用途是什么，它通过'zoom'？我假设它是将缩放元素的浏览器事件传递给事件处理程序zoomed。但是，如何在这里处理平移？只是我还是将.scaleExtent 和.on 作为d3.zoom() 的参数更有意义？

【问题讨论】：

标签： d3.js

【解决方案1】：

矩形接收浏览器缩放事件。

zoomed 函数将变换应用于 g 元素

请注意，我们在 g 之后有 rect，否则 rect 将在 g 后面不接收事件。

svg - g - rect

【讨论】：