d3.js在重新缩放后获得新的域值

时间:2017-04-13 16:02:29

标签: javascript d3.js rescale

我在重新调整轴之后尝试获取新的轴值。

我尝试从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()函数)。

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

1 个答案:

答案 0 :(得分:4)

根据这个代码来回答我的答案:

  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/