D3 缩放回调

Question

以this timeless example 的 D3 变焦。缩短代码如下：

var svg = d3.select("svg")
  ...;

var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[-100, -100], [width + 90, height + 100]])
    .on("zoom", zoomed);

...

d3.select("button")
    .on("click", resetted);

svg.call(zoom);

function zoomed() {
  view.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}

function resetted() {
  svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity);
}

在 D3 缩放库中，指定缩放行为，然后将缩放应用到画布或 SVG 目标。在不重新定义缩放行为的情况下，我如何/在哪里将回调作为参数发送到 zoomed()？

Answer 1

既然你问...

我如何/在哪里可以将回调作为参数发送？

...你的问题太危险了太宽泛了。但这里有一种可能性（在很多中）：

假设这个简单的回调函数：

function callback(x){
    console.log(x);
}

我们可以将它发送到zoom 函数来更改监听器。所以，而不是：

.on("zoom", zoomed);

我们可以做到：

.on("zoom", function(){
    zoomed(callback)
});

并且，在zoom 函数中，设置回调参数。例如，让我们记录d3.event.transform：

function zoomed(fn) {
    fn(d3.event.transform);
    //rest of the code...
}

这是一个演示 bl.ocks：http://blockbuilder.org/GerardoFurtado/38c77c024ba4cc42c86221117fed4164