Question

我是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)
};

完整示例如下：https://bl.ocks.org/rutgerhofste/5bd5b06f7817f0ff3ba1daa64dee629d

我想使用新比例替换旧比例的原因是，在我的情况下，svg的很多部分都与比例有关。如果我只是改变旧的比例，那些绑定的事件将完美地工作。我不想在zoomFunction中回收所有内容。

Answer 1

所以你想改变

xAxisScale = new_xScale; yAxisScale = new_yScale;

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

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

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

原因： xAxisScale andyAxisScale应该是原始版本，因为重新缩放是基于/相对于原始比例值计算的。

解决这个问题的一种方法是制作原件的副本 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)
};

工作代码here

d3平移和缩放时更新旧刻度

1 个答案: