dc.js 图表未链接

Question

除了.brushOn 选项外，我有两个完全相同的barCharts：

pnlPerDaybarChart
    .height(300)
    .width(700)
    .dimension(dims.date)
    .group(groups.date.pnlSum)
    .valueAccessor(function(d) {
        return Math.abs(d.value);
    })
    .renderTitle(false)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xUnits(d3.time.days)
    .colors(colorChoice)
    .colorAccessor(colorAccessorPosNeg)
    .brushOn(false)
    .elasticY(true)
    .margins({left: 70 ,top: 10, bottom: 30, right: 50})
    .centerBar(true);

pnlPerDaybarChartBrush
    .height(100)
    .width(700)
    .dimension(dims.date)
    .group(groups.date.pnlSum)
    .valueAccessor(function(d) {
        return Math.abs(d.value);
    })
    .renderTitle(false)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xUnits(d3.time.days)
    .colors(colorChoice)
    .colorAccessor(colorAccessorPosNeg)
    .brushOn(true)
    .elasticY(true)
    .margins({left: 70 ,top: 10, bottom: 30, right: 50})
    .centerBar(true);

它们以我期望的方式呈现，但是当我在pnlPerDaybarChartBrush 上使用画笔时，dc.js 不会更新另一个。

此外，单击pnlPerDaybarChart 中的条不会修改pnlPerDaybarChartBrush 呈现（或网页上的任何其他图表）。

这是预期的行为吗？

我期待的是：

• 当我点击图表中的某一天而不刷它时 自动呈现包含特定日期数据的所有图表。
• 当我使用画笔时，它也会在没有画笔的情况下呈现过滤后的图表

这里是jsFiddle

Answer 1

默认情况下，dc.js 条形图似乎不支持点击过滤。画笔功能应该是您过滤条形图或折线图的方式（但正如您所发现的，它有其自身的复杂性）。

如果您的数据太密集而无法使用画笔精确过滤，一种选择是允许用户通过鼠标或触摸事件放大范围图：
http://jsfiddle.net/r4YBS/4/

唯一的变化是添加

    .mouseZoomable(true);

在可刷条形图定义的末尾。

您也可以实现自定义点击监听器，然后直接调用.filter() 方法。

Answer 2

Fiddle 满足您的要求。

你当然是对的。

.rangeChart 是您需要使用它的属性。

希望对你有帮助。