Анизотропное масштабирование в версии d3 4

Question

Как можно обеспечить отдельные шкалы масштабирования для оси x и y в D3 версии 4?

This example by Patrick Brockman дал метод, который отлично работал под управлением v3, что позволило привязать масштабирование к объектам с масштабным коэффициентом. Соответствующий код:

xyzoom = d3.behavior.zoom() 
    .x(xscale) 
    .y(yscale) 
    .on("zoom", zoomable ? draw : null); 
    xzoom = d3.behavior.zoom() 
    .x(xscale) 
    .on("zoom", zoomable ? draw : null); 
    yzoom = d3.behavior.zoom() 
    .y(yscale) 
    .on("zoom", zoomable ? draw : null); 

Обрати внимание, что есть два масштабирование объектов, один для каждой оси, и они связаны как с метки оси/клещами области и основной сюжет, так что панорамирование/масштабирование деятельность является кумулятивной по все три области.

В новой парадигме имеется объект масштабирования, связанный с элементами страницы, где происходит масштабирование, которое имеет один масштабный коэффициент и двумерное смещение. Поддержка воздействия на объекты масштабирования преобразует преобразование без обновления его на месте. Совместное использование трансфокатора трансфокатора между всеми тремя областями даст только один масштабный коэффициент (не говоря уже о том, что масштабирование на оси метки/области тика будет по-прежнему влиять на другую ось), и позволяя каждому иметь свой собственный масштаб, создает ужасное проблема с порядком применения (преобразование преобразования НЕ является коммутативным).

Нет даже простого способа получить преобразование для отдельных шагов и объединить их самостоятельно (попытка сброса трансформации трансфокатора на личность вызывает все те же события, что и действия пользователя).

Как можно достичь анизотропного увеличения (различные коэффициенты растяжения в разных направлениях) в версии 4?

Вот что я до сих пор, что совершенно неправильно (он накапливается эффект увеличения преобразования, которое само по себе является кумулятивным трансфокации событий):

function zoom_update() { 
    svg.select('rect.zoom.x.box').call(d3.zoom().on('zoom', function() { 
       xscale = d3.event.transform.rescaleX(xscale); 
       update(); 
     })); 
    svg.select('rect.zoom.y.box').call(d3.zoom().on('zoom', function() { 
       yscale = d3.event.transform.rescaleY(yscale); 
       update(); 
     })); 
    svg.select('rect.zoom.xy.box').call(d3.zoom().on('zoom', function() { 
       xscale = d3.event.transform.rescaleX(xscale); 
       yscale = d3.event.transform.rescaleY(yscale); 
       update(); 
     })); 

Нужно ли пропускать через zoom модуль и обрабатывать события мыши напрямую?

Answer 1

Взгляните на этот example

В вашем случае, я хотел бы предложить что-то вроде

// define the zoom 
d3.zoom().on('zoom', function() { 
    zoom_update(); 
}); 

function zoom_update() { 
    // re-scale 
    svg.select('rect.zoom.x.box') 
     .call(xAxis.scale(d3.event.transform.rescaleX(x))); 
    svg.select('rect.zoom.y.box') 
     .call(yAxis.scale(d3.event.transform.rescaleY(y))); 

    svg.select('rect.zoom.xy.box') 
     .call(xAxis.scale(d3.event.transform.rescaleX(x))); 
    svg.select('rect.zoom.xy.box') 
     .call(yAxis.scale(d3.event.transform.rescaleY(y))); 

    update(); 
}