dc.js-是否可以在页面加载时显示用户抓取句柄 [英] dc.js - is it possible to show the user grab handles upon page load

问题描述

我正在构建供内部使用的基本仪表板.我对D3/SVG等方面的经验很少，因此，如果这很明显，请原谅:

I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious:

我有一个时间序列值，一年中每个日期一个值.受到 dc.js wesbite 上的示例的启发，我正在显示迷你"整个系列的条形图，并允许用户选择一个范围，该范围又设置了大"线图的轴刻度范围的极限.

I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot.

默认情况下(页面加载/refreshAll())，我已将大线图的限制设置为最近60天.

By default (on page load / refreshAll()) I've set the limits of the large line plot to be the most recent 60 days.

鼓励用户使用底部的小图来设置所需的范围，当他们这样做时，将显示抓握手柄"，并且选中的范围会在小图上突出显示，例如:

The user is encouraged to set their desired range using the mini plot at the bottom, and when they do, the 'grab handles' appear and the chosen range is highlighted on the mini plot, for example:

在页面加载/refreshAll()上，迷你图上未显示抓取手柄和范围高亮显示，例如:

On page load / refreshAll(), the grab handles and range highlighting aren't shown on the mini plot, for example:

有没有一种方法可以设置抓取手柄以在页面加载时显示?

Is there a way I can set the grab handles to appear upon page load?

推荐答案

这是我使用crossfilter和dc.js的方法.您可以执行以下操作来获取最近的x天:

Here is how i do it by using crossfilter and dc.js. You can get the last x days by doing something like:

xrange = d3.extent(data, function(d) { return d.date; });
last60 = [d3.time.day.offset(xrange[1], -60), d3.time.day.offset(xrange[1], 1)]

假设您的数据中有一个date.在使用d3读取数据之后，但在将其输入交叉滤波器之前，请执行此操作.

Assuming you have a date in your data. Do this after reading the data with d3, but before feeding it into crossfilter.

然后，对于底部图表(小图)，只需将filter属性设置为:

Then for the bottom chart (mini plot) simply set the filter property to:

.filter(last60)

还将顶部图表的xrange设置为相同范围:

And also set the xrange for the top chart to the same range:

.x(d3.time.scale().domain(last60))

像这样的事情也可以用于设置xrange，但是我还没有成功:

Something like this might also work for setting the xrange, but i havent had any success with that:

topchart.focus(bottomchart.filter())

这篇关于dc.js-是否可以在页面加载时显示用户抓取句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！