Javascript d3平移和缩放时更新旧比例

我是d3新手。当使用

d3v4

进行平移和缩放时，我注意到我们总是必须基于

d3.event.transform

创建新比例，并将新比例应用于所有内容，而不是用新比例替换旧比例并再次应用旧比例。例如，此缩放功能工作正常：

function zoomFunction(){
  // create new scale ojects based on event
  var new_xScale = d3.event.transform.rescaleX(xAxisScale)
  var new_yScale = d3.event.transform.rescaleY(yAxisScale)
  console.log(d3.event.transform)

  // update axes
  gX.call(xAxis.scale(new_xScale));
  gY.call(yAxis.scale(new_yScale));

  // update circle
  circles.attr("transform", d3.event.transform)
};

此缩放功能可使一切正常：

function zoomFunction(){
  // create new scale ojects based on event
  var new_xScale = d3.event.transform.rescaleX(xAxisScale)
  var new_yScale = d3.event.transform.rescaleY(yAxisScale)
  xAxisScale = new_xScale;
  yAxisScale = new_yScale;
  console.log(d3.event.transform)

  // update axes
  gX.call(xAxis.scale(xAxisScale));
  gY.call(yAxis.scale(yAxisScale));

  // update circle
  circles.attr("transform", d3.event.transform)
};

完整示例如下：

我之所以想使用新的scale来替换旧的scale，是因为在我的例子中，svg的很多部分都与scale相关。如果我简单地改变旧的比例，那些绑定的事件将完美地工作。我不想收回zoomFunction中的所有内容。

所以您希望更改

xaxiscale=newxscale；
yAxisScale=新的yScale

由于某种原因，在缩放功能内部

如果您这样做，重新缩放将无法按预期工作

  var new_xScale = d3.event.transform.rescaleX(xAxisScale)
  var new_yScale = d3.event.transform.rescaleY(yAxisScale)

原因：xAxisScale和YaxisScale应该是原始的，因为重缩放是基于/相对于原始比例值计算的

解决这个问题的一种方法是复制原件
x和y刻度

// create scale objects
var xAxisScale =d3.scaleLinear()
  .domain([-200,-100])
  .range([0,width]);

var yAxisScale = d3.scaleLinear()
  .domain([-10,-20])
  .range([height,0]);

//make a copy of the scales
var copyX = xAxisScale.copy();  
var copyY = yAxisScale.copy();  
// create axis objects

下一步，在zoomFunction中执行以下操作：

function zoomFunction(){
  // create new scale ojects based on event
  var new_xScale = d3.event.transform.rescaleX(copyX)
  var new_yScale = d3.event.transform.rescaleY(copyY)
  //changing scale due to some reason.
  xAxisScale = new_xScale;
  yAxisScale = new_yScale;

  // update axes
  gX.call(xAxis.scale(xAxisScale));
  gY.call(yAxis.scale(yAxisScale));

  // update circle
  circles.attr("transform", d3.event.transform)
};

工作代码
这个答案完美地解决了我的问题。多谢各位！为了确保我理解它，每个平移和缩放过程都基于原始比例，它决定了初始位置和范围，而不是最新的比例，对吗？