d3.js 重新缩放后获取新的域值答案

【问题标题】：d3.js get new domain values after rescaled3.js 重新缩放后获取新的域值
【发布时间】：2017-09-09 20:25:20
【问题描述】：

我在重新调整坐标轴后尝试获取新坐标轴值。

我试图从y.domain() 得到它们，如回答here 但返回的值是初始值。

那么我在这里做错了什么？

相关代码：

function zoomed() {

  for(let i = 0; i < ys.length; i++){
    yAxes[i].call(
      d3.axisLeft(ys[i])
        .scale(d3.event.transform.rescaleY(ys[i]))
    )
  }

  //Now I need the new values

  console.log(ys[0].domain()) //returns [0, 10] which are my initial domain values for this axis.

}

缩放后，我在屏幕上显示的值大于 0 小于 10。那么如何让我的域获得新的最小值和最大值？

Here 是我的旧版本代码的小提琴，它具有完全相同的行为（请参阅zoomed() 函数）。

也许我误解了域是什么以及它是如何工作的，我需要的是轴的新最大值和最小值。

【问题讨论】：

你能发布一个小提琴或一个你到目前为止所得到的代码笔
向问题添加小提琴

标签： javascript d3.js rescale

【解决方案1】：

我的答案基于小提琴中的这段代码：

  function zoomed() {
    let center = getBoundingBoxCenterX(rect);
    let chartsWidth = (2 * center) * d3.event.transform.k;
    d3.event.transform.x = center - chartsWidth / 2;
    xAxis.call(d3.axisBottom(x).scale(d3.event.transform.rescaleX(x)));
    yAxis.call(d3.axisLeft(y).scale(d3.event.transform.rescaleY(y)));
    zAxis.call(d3.axisRight(z).scale(d3.event.transform.rescaleY(z)));

    //here i need the new values
    console.log(y.domain()) //returns [0,6]

编辑

您可以通过这种方式获得轴刻度：

let leftAxis = d3.axisLeft(y).scale(d3.event.transform.rescaleY(y));
console.log('new domain values', leftAxis.scale().domain())

我有一个版本的小提琴可以使用：https://jsfiddle.net/aj5sLz5u/

【讨论】：