zooming - d3 版本 4 中的各向异性缩放

Question

如何在 D3 版本 4 中为 x 轴和 y 轴提供单独的缩放比例？

This example by Patrick Brockman给出了一种在 v3 下运行良好的方法，它允许将缩放绑定(bind)到比例因子对象。相关代码:

  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);

请注意，有两个缩放对象，每个轴一个，它们从轴标签/刻度区域和主图绑定(bind)，因此平移/缩放事件在所有三个区域中是累积的。

在新范例中，有一个缩放变换对象与发生缩放的页面元素链接，它具有单个比例因子和二维偏移。对影响缩放对象的支持会在不就地更新变换的情况下变换变换。在所有三个区域之间共享缩放变换只会给出一个整体比例因子(更不用说放大轴标签/刻度区域仍然会影响另一个轴的问题)，并且允许每个区域都有自己的缩放变换会产生可怕的应用顺序问题(变换乘法不可交换)。

甚至似乎没有一种直接的方法来获取各个步骤的转换并将它们自己组合起来(尝试将缩放转换重置为身份会引发与用户操作相同的所有事件)。

如何在版本 4 中实现各向异性缩放(不同方向的不同拉伸(stretch)因子)？

这是我到目前为止所拥有的，这是完全错误的(它累积了缩放变换的效果，而缩放变换本身就是缩放事件的累积):

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();
}