Question

我是dc.js的新手并尝试实施类似＆＃34;每月指数Abs Move＆＃34; https://dc-js.github.io/dc.js/演示中的图表（参见https://dc-js.github.io/dc.js/docs/stock.html的文件来源）。

即。我试图为＆＃34;放大＆＃34;实施折线图。用条形图查看＆＃34;缩小＆＃34; view（rangeChart）。

我的问题是，当我过滤日期范围时（例如，使用＆＃34; brushOn＆＃34;条形图），过滤掉的条形消失

该演示使其正常工作 - 日期范围之外的条形图为灰色，日期范围内的条形图为蓝色 - 请参见屏幕截图。

我使用了演示中使用的css文件，并且我使用了非常相似的代码（请参阅下面的代码），所以我不确定为什么会出现这种差异。

var maxDate = new Date(1985, 0, 1);
var minDate = new Date(2200, 12, 31);
events.forEach(function (d) {
    d.created = new Date(d.created);
    //d.last_modified = new Date(d.last_modified);
    d.hour = d3.time.hour(d.created); // precaclculate for performance
    d.day = d3.time.day(d.created);
    if (d.created > maxDate) {
        maxDate = d.created;
    }
    if (d.created < minDate) {
        minDate = d.created;
    }
});

var ndx = crossfilter(events);

var dateDimension = ndx.dimension(dc.pluck('created'));
var chatHourDim = ndx.dimension(dc.pluck('hour'));
var chatDayDim = ndx.dimension(dc.pluck('day'));

var chatsPerHourGroup = chatHourDim.group().reduceCount();
var chatsPerDayGroup = chatDayDim.group().reduceCount();

visitorsPerHour   /* dc.lineChart('#visitors-count', 'chartGroup'); */
    .renderArea(true)
    .width(900)
    .height(200)
    .transitionDuration(10)
    .margins({top: 30, right: 40, bottom: 25, left: 40})
    .dimension(chatHourDim)
    .mouseZoomable(true)
    // Specify a “range chart” to link its brush extent with the zoom of the current “focus chart”.
    .rangeChart(visitorsPerDay)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .elasticY(true)
    .renderHorizontalGridLines(true)
    .legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))
    .brushOn(false)
    .group(chatsPerHourGroup, 'Chat events per hour')
    .title(function (d) {
        var value = d.value;
        if (isNaN(value)) {
            value = 0;
        }
        return dateFormat(d.key) + '\n' + value + " chat events";
    });


// dc.barChart("visitors-count-per-day", 'chartGroup'); 
visitorsPerDay.width(900)
    .height(40)
    .margins({top: 0, right: 50, bottom: 20, left: 40})
    .dimension(chatDayDim)
    .group(chatsPerDayGroup)
    // .centerBar(true)
    .gap(1)
    .brushOn(true)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .round(d3.time.day.round)
    .alwaysUseRounding(true)
    .xUnits(d3.time.days);

Answer 1

dc.js和crossfilter通常支持此功能的方式是a crossfilter group does not observe its own dimension's filters。

stock示例中的范围图示例对两个图表使用相同的维度（moveMonths）。因此，当焦点图表缩放到范围图表中的选定范围时，它会过滤所有其他图表（您想要的）的数据，但不会过滤范围图表。

如果你想为这两个图表使用不同的尺寸，我可以看到几种方法来解决这个问题。

使用虚假组

最简单的做法是使用fake group快照数据并断开范围图表与后续过滤器的连接：

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))

但是，范围图表也不会对其他图表上的过滤器做出响应，您可能希望这样做。

相同维度，不同群组

所以可以说更正确的是对聚焦和范围图表只使用一个时间维度，尽管它会杀死你在binning上尝试做的优化。组可选地使用其自己的访问器，该访问器获取维度密钥并生成其自己的密钥，该密钥必须保留排序。

似乎它可能就是为了这个目的而设计的：

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日期对象很慢，但除非您要转换数十或数十万个日期，否则这不应成为问题。它通常是DOM元素，是d3 / dc的瓶颈，而不是JavaScript方面的任何东西。

dc.js - 过滤掉时，rangeChart条消失

1 个答案:

使用虚假组

相同维度，不同群组