Question

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

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

我不明白的是：

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 - 矩形的成员函数吗？它在这做什么？ And d3.zoom根据文档a＆＃39;行为＆＃39;。这是什么意思，这两者之间的耦合如何在这里起作用？函数.on的目的是什么，它被传递'zoom'？我假设它将用于缩放元素的浏览器事件传递给事件处理程序zoomed。但那么如何处理平移呢？仅仅是我还是将.scaleExtent和.on作为d3.zoom()的参数更有意义？

Answer 1

rect 接收浏览器缩放事件。

缩放功能将变换应用于 g 元素

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

svg - g - rect

迈克博斯托克（D3js＆＃39; s创造者）是如何平和的？缩放示例工作？

1 个答案: