在 dc 图表库中将折线图放大至数小时

Question

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

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

以上述链接为例，其中每月指数 Abs 是折线图。当你放大时，它会在 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]);

方法二：

.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 小时，等等。