dc.js - 如何在加载时将画笔（具有特定宽度）设置为barChart

Question

在加载时我看到这一点，所有数据集都没有过滤器：
Picture: what i have

我想看到这一点，刷子（选择器）已经在装载的最后21天被选中：
Picture: what i want
Solved! click for answer

在这里，我看到了类似的问题，但不适合我 dc.js - is it possible to show the user grab handles upon page load

var lineChart = dc.lineChart(".chart-line-graph");
var dateRangeChart = dc.barChart('.chart-date-range');

var hourDim = ndx.dimension(function(d) {return d.hour;});
var valueByHour = hourDim.group().reduceSum(function(d) {return d.value;});
var minDate = hourDim.bottom(1)[0].date;
var maxDate = hourDim.top(1)[0].date;

lineChart
    .renderArea(true)
    .width(1360)
    .height(350)
    .transitionDuration(200)
    .margins({top: 30, right: 50, bottom: 45, left: 80})
    .dimension(hourDim)
    .mouseZoomable(true)
    .rangeChart(dateRangeChart)
    .brushOn(false)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .elasticY(true)
    .group(value)
    .renderHorizontalGridLines(true);

var dayDim = ndx.dimension(function (d) {return d.day;});
var groupByDayDim = moveDays.group();

dateRangeChart
    .width(1360)
    .height(35)
    .margins({top: 0, right: 50, bottom: 20, left: 80})
    .dimension(moveDays)
    .group(volumeByMonthGroup)
    .centerBar(false)
    .gap(1)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .round(d3.time.week.round)
    .alwaysUseRounding(true)
    .xUnits(d3.time.days);
dateRangeChart
    .yAxis().ticks(0);  

如果我加上这个：

lineChart
    .filter(dc.filters.RangedFilter(d3.time.day.offset(xrange[1], -21), d3.time.day.offset(xrange[1], 1)))  

然后barChart被过滤，但未被选中

Answer 1

我解决了我的第一个问题！ 只需在所有代码后添加过滤器（在renderAll（）之后），然后调用redrawAll（）

屏幕截图，现在看起来如何，在负载图表上