向上缩放 y 轴，同时使用 D3.js 向下缩放 x 轴

Question

我正在构建一个交互式图形，以显示带有 D3.js 的 javascript 中 1/r 函数的比例不变性。为此，我需要将图形在 x 方向缩放 k 倍，在 y 方向缩放 1/k 倍。为此，我可以访问 d3.event.transform 并手动设置 y 轴的 k 因子，如下所示：

var newxScale = d3.event.transform.rescaleX(xScale)
// this does not feel good, neither does it really work
d3.event.transform.k = 1/ d3.event.transform.k
var newyScale = d3.event.transform.rescaleY(yScale)
d3.event.transform.k = 1/ d3.event.transform.k

如小提琴所示：https://jsfiddle.net/od9pcnut/44/

更改 d3.event.transform 中的变量感觉非常错误，并且会扰乱鼠标位置周围的缩放（当我缩放图形时，绘制的线会向某个方向漂移）。如何在保留鼠标位置缩放功能的同时，让比例尺在不同方向按不同因素进行缩放？

Answer 1

d3.event.transform 是d3.zoomIdentity 的一个实例。您可以构建一个新的缩放标识并使用它重新缩放 X / Y 比例：

const {x, y, k} = d3.event.transform; 

const newxScale = d3.zoomIdentity
  .translate(x, y)
  .scale(k)
  .rescaleX(xScale);

const newyScale = d3.zoomIdentity
  .translate(x, y)
  .scale(1 / k)
  .rescaleY(yScale);