各向异性缩放d3版本4

Question

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

帕特里克·布罗克曼(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

看看这个例子

对于你的情况，我建议类似

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