D3 зум обратный вызов - PullRequest
Новая
       7

D3 зум обратный вызов

0 голосов
/ 27 июня 2018

Возьмите этот вневременной пример увеличения 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() без переопределения поведения увеличения?

1 Ответ

0 голосов
/ 27 июня 2018

Так как вы спросили ...

Как / где я могу отправить обратный вызов в качестве параметра?

... ваш вопрос опасно слишком широк . Но есть возможность (из многих):

Предположим, это простая функция обратного вызова: 

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

...