Question

我有一个垂直堆积的条形图（下）和散点图（上）。我正在尝试在条形图上实现缩放，而仅在散点图上实现平移，但是当我尝试在缩放后进行平移时，我的实现会跳转。

更多详细信息：我在X轴上使用缩放功能仅控制显示的条形数量。所以我从100开始，随着缩小，我会显示更多的条形图，例如高达1000，

我只想平移散点图，而不要重新缩放比例，因为这样做的时候，我将失去散点图的分辨率。因此，我试图找到一种方法，仅允许在散点图上平移，同时能够如上所述放大条形图。

我尝试应用d3.event.transform.rescaleX函数自动缩放X轴。我可以使用此功能实现条形图缩放。

我尝试使用d3.event.transform.rescaleY函数来实现Y轴上的平移。要禁用缩放，我过滤了源以排除鼠标滚轮。但是，当我这样做时，如果在缩放后尝试平移，则图表会跳跃。只有在缩放后平移时才会发生这种情况。

Answer 1

我设法解决了这个问题。如果有人遇到相同的问题，这是伪代码。

//PSEUDO CODE
const zoom = () => {
  //capture transform   | const T = d3.event.transform;
  //Apply rescaleX on X axis | const xscale = T.rescaleX(xscale);
  //if source is wheel ignore
  //if source is not wheel | d3.event.sourceEvent.type != "wheel"
  //           - rescale Y axis | yscale = T.rescaleY(yscale);
  // use identity transform on selection to reset transform (command below)
  //      - d3.select('#zoomSelection').call(fzoom.transform, d3.zoomIdentity);
}

上面的伪代码演示了如何在源上使缩放转换无效并获得所需的结果。

我有一个垂直堆叠的条形图（底部）和散点图（顶部）。我正在尝试在Y轴上实现“仅PAN”，在X轴上实现“ ZOOM + PAN”

1 个答案: