Question

进行{3}的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

D3缩放回调

1 个答案: