javascript - 在 dc 图表库中限制折线图放大最多小时

Question

我们面临 dc 库折线图的问题。

http://dc-js.github.io/dc.js/

以上面的链接为例，其中每月指数绝对值是折线图。当您放大时，X 轴上的时间最多为分钟，例如 5.15、5.30、5.45 等。

我们定义了 X 轴刻度，如下所示:它是日、月、年和小时的组合。

.x(d3.time.scale().domain([new Date(sdate.getFullYear(),sdate.getMonth(),sdate.getDate(),sdate.getHours()), new Date(edate.getFullYear(),edate.getMonth(),edate.getDate(),edate.getHours())])) // (startDate, endDate)

在此，我们尝试通过两种方式将缩放限制为小时，但不起作用。

方法一:

 .zoomExtent([0, 23]);

方法 2:

.zoomExtent([new Date(sdate.getFullYear(),sdate.getMonth(),sdate.getDate(),sdate.getHours()), new Date(edate.getFullYear(),edate.getMonth(),edate.getDate(),edate.getHours())]);

我们希望此放大功能最多限制几个小时，例如下午 4 点、下午 5 点、下午 6 点等，而不是分钟。

提前致谢。

Answer 1

使用chart.zoomScale() ，用于设置 d3.zoom.scaleExtent()

该参数是一个包含两个元素的数组，即允许的最小和最大缩放比例。默认情况下为[1, Infinity]

确定您希望图表缩放和设置的最大系数。例如。如果您只想缩放 20 倍，请设置:

chart.zoomScale([1, 20]);

缩放是一个乘法因子。 IE。如果缩小的图表中有20天，则将数组的第二个元素设置为20将允许您放大到1天，或者将其设置为20*24将允许您放大到1小时，依此类推。