Javascript dc.js-过滤掉时范围图栏消失

我是dc.js的新手，正在尝试在 （请参阅位于的文档源）

我正在尝试实现一个用于“放大”视图的折线图和一个用于“缩小”视图的条形图（范围图）

我的问题是，当我过滤一个日期范围（例如，使用条形图上的“画笔”）时，过滤掉的条形图就会消失

演示程序正确地运行了这个功能-日期范围外的条是灰色的，日期范围内的条是蓝色的-请参见屏幕截图

我使用的是演示中使用的css文件，我使用的代码非常类似（见下面的代码），所以我不确定为什么会有这种差异

var maxDate=新日期（1985,0,1）；
var minDate=新日期（2200、12、31）；
events.forEach（函数（d）{
d、 已创建=新日期（d.已创建）；
//d、 上次修改=新日期（d.上次修改）；
d、 hour=d3.time.hour（d.created）；//为性能预先计算
d、 天=d3.时间.天（d.已创建）；
如果（d.created>maxDate）{
maxDate=d.created；
}
如果（d.created

dc.js和crossfilter通常支持此功能的方式如下

股票示例中的范围图示例对两个图表使用相同的维度（

moveMonths

）。因此，当焦点图表缩放到范围图表中的选定范围时，它会过滤所有其他图表（您需要的图表）的数据，但不会过滤范围图表

如果你想在两个图表中使用不同的维度，我可以找到一些方法来解决这个问题

使用假组 也许最简单的方法是快照数据，并使用以下方法断开范围图与后续过滤器的连接：

但是，范围图也不会响应其他图表上的过滤器，您可能希望它响应

相同维度，不同组 因此，可以说，更正确的做法是对焦点图和范围图只使用一个时间维度，尽管这会扼杀您试图对装箱进行的优化。组可以选择使用自己的访问器，该访问器使用维度键并生成自己的键，该键必须保留顺序

看起来它可能正是为了这个目的而设计的：

var dateDimension = ndx.dimension(dc.pluck('created'));

var chatsPerHourGroup = dateDimension.group(function(d) {
    return d3.time.hour(d);
}).reduceCount();
var chatsPerDayGroup = dateDimension.group(function(d) {
    return d3.time.day(d);
}).reduceCount();

visitorsPerHour   /* dc.lineChart('#visitors-count', 'chartGroup'); */
    .dimension(dateDimension)
    .group(chatsPerHourGroup, 'Chat events per hour')

visitorsPerDay.width(900)
    .dimension(dateDimension)
    .group(chatsPerDayGroup)

---

我不知道你是否会注意到减速。是的，JavaScript日期对象速度很慢，但这不应该是一个问题，除非您正在转换数十个或数十万个日期。d3/dc中的瓶颈通常是DOM元素，而不是JavaScript方面的任何东西。

谢谢！我使用了你的第二个建议，根本没有注意到任何减速。现在它起作用了，更重要的是——我更了解发生了什么。那太好了。是的，我试图将这些答案转化为坚实的解释，而不是一本书或概念性文档。谢谢你的赏识。

function snapshot_group(group) {
    // will get evaluated immediately when the charts are initializing
    var _all = group.all().map(function(kv) {
        // don't just copy the array, copy the objects inside, because they may change
        return {key: kv.key, value: kv.value};
    });
    return {
        all: function() { return _all; }
    };
}

visitorsPerDay
    .group(snapshot_group(chatsPerDayGroup))

var dateDimension = ndx.dimension(dc.pluck('created'));

var chatsPerHourGroup = dateDimension.group(function(d) {
    return d3.time.hour(d);
}).reduceCount();
var chatsPerDayGroup = dateDimension.group(function(d) {
    return d3.time.day(d);
}).reduceCount();

visitorsPerHour   /* dc.lineChart('#visitors-count', 'chartGroup'); */
    .dimension(dateDimension)
    .group(chatsPerHourGroup, 'Chat events per hour')

visitorsPerDay.width(900)
    .dimension(dateDimension)
    .group(chatsPerDayGroup)