javascript - 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上多次调用zoom函数？ 第一次调用时，我们不传zoomSettings，第二次调用我们的确是。这有什么意义？这是否与缩放事件在 SVG 上工作而不是一个包含我所有路径的组有关？我习惯了像这样的更简单的缩放示例，它们在 SVG 上调用并且元素绑定(bind)到一个组:

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^

如果有人能对此提供任何澄清，我们将不胜感激。尽管有 API，我发现 D3 中的 zoom() 非常令人困惑。

Answer 1

这一行:

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

正在做两件不同的事情。

首先，svg.call(mapZoom) 是 applying the zoom behavior到 svg。第二个调用 .call(mapZoom.transform, zoomSettings) 是 programmatically setting a zoom transform到 svg。这是在用户对其进行任何操作之前设置它的初始状态。

所以这样想:

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