d3更改比例域並保持縮放按預期工作

Question

我對縮放和縮放/軸有疑問。

在某些時候，我的圖表具有以下配置：

Y域尺度：

this.scaleY = d3
  .scaleLinear()
  .domain([10, 20])
  .range([this.chartHeight, 0]);

ZoomTransform：

{
  x: -10,
  y: -4,
  k: 0.2
}

現在，我以編程方式更改y縮放域（和軸）：

this.scaleY = d3
  .scaleLinear()
  .domain([80, 100])
  .range([this.chartHeight, 0]);

問題是，如果我放大/縮小，則y比例會回到原始比例。

因此，我想更改一個軸的域，並保持縮放正常工作。

我希望我已經說清楚了。

您是否看到任何解決方案以保持當前縮放並僅更新軸？ 我不想將縮放重置為“身份”。

謝謝

Answer 1

d3.event.transform對象在其原型上還包含其他方法，例如rescaleY() 。

rescaleY(originalYScale)將返回y比例尺，其范圍已更改，以考慮d3.event.transform的當前轉換參數。

然后，您可以使用axis.scale() setter方法使用此新比例尺來更新y軸。 最后，您可以使用`call（）方法更新軸元素（ g元素）。

因此，如Mike Bostock的zoom示例所示 ，您的zoom回調可能類似於：

function zoomed() {
  view.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}