dc.js图表​​未链接 [英] dc.js charts not linked

问题描述

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

I have two barCharts exactly equivalent except for the .brushOn option :

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不会更新另一个.

They render the way I expect but when I use the brush on pnlPerDaybarChartBrush, dc.js doesn't update the other one.

此外，单击pnlPerDaybarChart中的栏不会修改pnlPerDaybarChartBrush呈现(或网页上的任何其他图表).

Also, clicking on a bar in pnlPerDaybarChart doesn't modify pnlPerDaybarChartBrush rendering (or any of the other charts on the webpage).

这是预期的行为吗?

我期望的是:

• 当我在图表中单击某天而不刷一下时 自动显示该特定日期的所有图表和数据.
• 当我使用画笔时，它也会呈现没有画笔的过滤后的图表

• when I click on a single day in the chart without brush it automatically renders all charts with data for that specific day.
• when I use the brush it also renders the filtered chart without brush

这是 jsFiddle

推荐答案

默认情况下，dc.js条形图看起来不支持点击过滤器.笔刷功能有望成为您过滤条形图或折线图的方式(但是，您已经发现，它有其自身的复杂性).

It doesn't look like dc.js bar charts support click-to-filter by default. The brush function is expected to be the way you filter a bar or line chart (but as you've discovered, it has its own complications).

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

If your data is too dense to filter it precisely with the brush, one option would be to allow the user to zoom in on the range chart with mouse or touch events:
http://jsfiddle.net/r4YBS/4/

唯一的变化是添加

    .mouseZoomable(true);

位于可刷写条形图的末尾.

at the end of the definition of the brushable bar chart.

或者，您可以实现自定义点击监听器，然后调用

Alternately you could implement a custom click listener, which then calls the .filter() method directly.

这篇关于dc.js图表​​未链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！