D3 缩放设置

Question

我在理解 D3 中缩放的工作原理时遇到了一些麻烦，特别是如何调用它和初始化设置。我有以下代码片段(仅包含必要的部分(，它来自 D3 V4 上的曼宁教科书，工作正常：

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
function createMap(countries, cities) {
    var projection = d3.geoMercator()
        .scale(scale)
        .translate([width/2,height/2])
var mapZoom = d3.zoom()
    .on("zoom", zoomed)
var zoomSettings = d3.zoomIdentity
    .translate(width/2, height/2)
    .scale(scale)
svg.call(mapZoom).call(mapZoom.transform, zoomSettings) // ?!!!
function zoomed() {
        var e = d3.event
        .translate([e.transform.x, e.transform.y])
        .scale(e.transform.k)
    // I didn't include the drawing of the paths, but 
       they are appended to the SVG, and this updates their data.
    d3.selectAll("path.graticule").attr("d", geoPath)
    d3.selectAll("path.countries").attr("d", geoPath)
    d3.selectAll("circle.cities")
    .attr("cx", d => projection([d.x,d.y])[0])
    .attr("cy", d => projection([d.x,d.y])[1])
}

为什么需要在 svg 上多次调用缩放函数？第一次调用它时，我们不会传递"zoomSettings"，第二次我们这样做。这有什么意义呢？这是否与缩放事件正在 SVG 上工作的事实有关，而不是一个保存我所有路径的组？我习惯了像这样的更简单的缩放示例，这些示例在 SVG 上调用，元素绑定到组：

var zoom = d3.zoom()
    .scaleExtent([1,3])
    .on("zoom", zoomed)
function zoomed(){
    g.attr("transform", d3.event.transform)
}
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .call(zoom)
var g = d3.select("svg").append("g")
// All elements are bound to group^

如果

有人能就此提供任何澄清，将不胜感激。我发现 D3 中的 zoom(( 令人难以置信地令人困惑，尽管有 API。

Answer 1

这一行：

svg.call(mapZoom).call(mapZoom.transform, zoomSettings)

正在做两件不同的事情。

首先，svg.call(mapZoom)将缩放行为应用于svg。 第二个调用 .call(mapZoom.transform, zoomSettings) 以编程方式将缩放转换设置为 svg。 这是在用户对其执行任何操作之前设置其初始状态。

所以可以这样想：

1. 创建缩放行为 ( var zoom = d3.zoom() (
2. 将其应用于 svg 元素 ( svg.call(mapZoom) (
3. 设置其初始状态 ( .call(mapZoom.transform, zoomSettings) (