各向異性縮放d3版本4

Question

如何在D3版本4中爲x軸和y軸提供單獨的縮放比例？

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