我正在创建与此类似的图表: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
但是,当我放大到某个部分时,我想将 Y 轴缩放到局部(显示)最大值,而不是全局值。例如,当我放大到 2009 年到 2010 年之间的数据时,顶部有很多空白区域。
基本上我想要实现的是获得我缩放的范围,并获得其中的最大值。
另一种可能是在侧面增加一个刷条,但从长远来看,这对用户来说会很不方便。
最佳答案
您只需为此更改y
比例域。
首先,让我们创建一个名为globalData
的全局变量并将数据数组关联到它。注意:这不是执行此操作的正确方法,但我会这样做只是因为brushed
和zoomed
函数位于d3.csv
,异步,重构它需要一些工作...因此,您的工作就是重构它。
然后,在brushed
和zoomed
两个函数中,我们根据画笔过滤数据:
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
关于javascript - 缩放时重新缩放轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51156782/