缩放时重新缩放轴

时间:2018-07-03 14:12:27

标签: javascript html d3.js svg charts

我正在创建与此类似的图形: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

但是,当我放大某个部分时,我想将Y轴缩放到局部(显示的)最大值,而不是全局的最大值。例如,当我放大2009年至2010年之间的数据时,顶部会有很多空白。

基本上,我想获得的是获得缩放到的范围,并在其中获得最大值。

另一种可能性是在侧面添加另一个画笔条,但是从长远来看,这对于用户来说非常不方便。

1 个答案:

答案 0 :(得分:1)

您只需要为此更改y比例域。

首先,让我们创建一个名为globalData的全局变量,并将数据数组与其关联。注意:这不是正确的方法,但我之所以这样做只是因为brushedzoomed函数位于d3.csv之外,这是异步,并进行重构需要一些工作...因此,重构将是您的工作。

然后,在brushedzoomed函数中,我们根据画笔过滤数据:

var filteredData = globalData.filter(function(d){
    return d.date > x.domain()[0] && d.date < x.domain()[1]
});

然后,我们计算新的y域:

y.domain([0, d3.max(filteredData, function(d){
    return d.price
})]);

别忘了再次调用该轴。

这是更新的bl.ocks:https://bl.ocks.org/GerardoFurtado/17fd6b82324e355c768992e78140fe9a/33b9a6c58265454864a9d921df032e708fad5237