0
votes

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

1
Your jsfiddle doesn't work for me. - Lars Kotthoff
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
It still seems to be unable to load crossfilter here... - Lars Kotthoff
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

1 Answers

0
votes

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.