D3.js dc.js-是否可以在页面加载时显示用户抓取手柄

我正在构建一个供内部使用的基本仪表板。我对D3/SVG等方面的经验很少，因此如果这是显而易见的，请原谅：

目标 我有一个值的时间序列，一年中每个日期一个值。受上示例的启发，我将显示整个系列的“迷你”条形图，并允许用户选择一个范围，该范围反过来设置“大型”线形图的轴比例范围的限制

默认情况下（在page load/refreshAll（）上），我将大线图的限制设置为最近60天

鼓励用户使用底部的迷你图设置所需范围，当用户设置时，会出现“抓取手柄”，并在迷你图上突出显示所选范围，例如：

我的问题 在page load/refreshAll（）上，抓取手柄和范围高亮显示不会显示在迷你图上，例如：

问题:

---

有什么方法可以设置抓取手柄在页面加载时显示吗？

下面是我如何使用crossfilter和dc.js实现的。您可以通过执行以下操作获得最后x天：

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

假设数据中有

日期

。在用d3读取数据后，但在将其送入交叉滤波器之前，执行此操作

然后，对于底部图表（迷你图），只需将过滤器属性设置为：

.filter(last60)

并将顶部图表的xrange设置为相同的范围：

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

这样的设置可能也适用于设置xrange，但我在这方面没有取得任何成功：

topchart.focus(bottomchart.filter())

---

下面是我如何使用crossfilter和dc.js来实现它的。您可以通过执行以下操作获得最后x天：

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

假设数据中有

日期

。在用d3读取数据后，但在将其送入交叉滤波器之前，执行此操作

然后，对于底部图表（迷你图），只需将过滤器属性设置为：

.filter(last60)

并将顶部图表的xrange设置为相同的范围：

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

这样的设置可能也适用于设置xrange，但我在这方面没有取得任何成功：

topchart.focus(bottomchart.filter())

---

非常感谢这一点——我走的几乎完全是同一条路，只是我没有正确地将筛选日期转换为日期——我将它们作为unix时间戳。现在我将标记为正确答案，但我在添加.filter（）时遇到了一个问题，它在dc.js中抛出了一个错误。我现在只是创建一个JSFIDLE来演示您的解决方案对我有效：）我来看看这个FIDLE。我通过使用

dateFormat=d3.time.format（“%Y-%m-%d”）解析字符串来填充我的
date

然后在

data.forEach（

循环使用

d.date=dateFormat.parse（d.date）

，我希望这是有意义的。您可以尝试通过使用

.filter（[new date（2013，1，15），new date（2013，4，26）]）设置手动日期以查看错误是否仍然发生。

，将xUnits设置为天也可能是必要的：

.xUnits（d3.time.days）

。我已经拼凑了这个，这证明了你的答案是有效的-非常感谢！这是我的fork，它从我的实现中添加了一些元素：

renderlet

和

on（“过滤”链接两个图表时需要使用

。我还更喜欢将条形图四舍五入到天，以使画笔对齐，因此您不能选择半个条形图。不知何故，我只能使用

.centerBar（false）

。再次感谢您的帮助，这项功能在dc.js 1.4.0中似乎已经更改，有关更多详细信息，请参阅我的。我想我会将此发送到，因为我想使用v1.4.0，而且它似乎已经破坏了功能。干杯！非常感谢您的帮助-我几乎走上了相同的道路，只是我没有正确地使用casti将筛选器日期设置为日期-我将它们设置为unix时间戳。我现在将标记为正确答案，但我在添加.filter（）时遇到了一个问题，它会在dc.js中抛出一个错误。我现在只是创建一个JSFIDLE来演示您的解决方案对我有效：）我来看看小提琴。我用

dateFormat=d3.time.format（“%Y-%m-%d”）；

解析字符串，然后在

data.forEach（

循环使用

d.date=dateFormat.parse（d.date）中填充
date

，我希望这是有意义的。您可以尝试使用

.filter（[new date（2013，1，15），new date（2013，4，26）]）设置手动日期以查看错误是否仍然发生。

，也可能需要将xUnits设置为天：

.xUnits（d3.time.days）

。我已经完成了这项工作，这证明了您的答案是有效的-非常感谢！这是我的fork，它从我的实现中添加了一些元素：

renderlet

和

on（“筛选”链接两个图表时需要使用

。我还更喜欢将条形图四舍五入到天，以使画笔对齐，因此您不能选择半个条形图。不知何故，我只能使用

.centerBar（false）

。再次感谢您的帮助，这项功能在dc.js 1.4.0中似乎已更改，有关详细信息，请参阅我的。我想我会将此发送到，因为我想使用v1.4.0，而且它的功能似乎已中断。干杯！