How to have only one brush show on page load when using multiple charts in dc.js/d3.js

Question

I've created a page using dc.js/d3.js with multiple bar charts and a row chart, and when I hover over them and interact, the brush functionality works as expected in all charts.

I'm trying to get just one of the charts to have the brush and a range appear on page load, but when I try this using .filter on one chart, the other charts become disabled. I have also experimented with .extent.

Image of the two version of the charts:

http://neil-s.com/unison/images/Brush3.png

I have looked at some related posts on SO, but they aren't quite what I need. The main crossfilter page has an example, but since the code is so different, I want to see if I can retain what I have, otherwise I'll use the crossfilter page code.

Updated: Here is a jsfiddle - http://jsfiddle.net/jth32/22/

And here is a small sample of the bar chart code:

    // Bar Chart 3-------------------------------
    psalBarChart
        .width(300).height(150)         
        .dimension(psalDim) 
        .group(psalGroup) 
        .x(d3.scale.linear()
            .domain([25, 40]))      
        .xAxisLabel("Salinity")
        .centerBar(true);

    // Bar Chart 4 -----------------------------------      
    depthBarChart
        .width(300).height(150)         
        .dimension(depthDim) 
        .group(depthGroup) 
        .x(d3.scale.linear()
            .domain([0, 2050]))                         
        .xAxisLabel("Depth")
        .centerBar(true)
        //.filter([0,1000]) // Creates Brush, but disables other charts

Thanks

The jsfiddle has been updated: jsfiddle.net/jth32/22 I've commented out line 358 in the javascript, which is what causes the other charts to become disabled. Thanks Lars. — NeilS
That's unfortunate. I'm using CDN links for all of the external resources, so I wonder why they're blocked there. Thanks for trying. — NeilS
Your original example (with line 358 uncommented) works fine for me. I see the filter on the Depth chart and am able to filter on the other charts if I want. I'm in Chrome - what browser are you seeing the problem in? — Ethan Jewett

NeilS NeilS · Accepted Answer · 2014-05-18T19:23:02

I found out it had to do with the version of dc.js that I was using. The latest version on github (v2.0) is what I had, but the CDN link I used in jsfiddle used version 1.6.0, and that works fine as Ethan mentioned. Once I switched to 1.6.0 in my dev environment, that fixed my issue.

I posted a message to the dc-js google user group, and I'll add another message here if this is indeed a bug in dc.js v2.0.

How to have only one brush show on page load when using multiple charts in dc.js/d3.js

1 Answers