dc.js charts not linked

问题

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

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

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

Is this the expected behaviour ?

What I was expecting is :

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

Here is the jsFiddle

回答1:

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

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/

The only change is adding

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

回答2:

Fiddle for your requirement.

You are of course right.

.rangeChart is the property you'd need to use it.

Hope it helps.

来源：https://stackoverflow.com/questions/21846926/dc-js-charts-not-linked

标签

d3.js

bar-chart

dc.js