在 dc.js/d3.js 中使用多个图表时如何在页面加载时只显示一个画笔答案

【问题标题】：How to have only one brush show on page load when using multiple charts in dc.js/d3.js在 dc.js/d3.js 中使用多个图表时如何在页面加载时只显示一个画笔
【发布时间】：2014-05-16 19:12:46
【问题描述】：

我使用 dc.js/d3.js 创建了一个带有多个条形图和一个行图的页面，当我将鼠标悬停在它们上并进行交互时，画笔功能在所有图表中都按预期工作。

我试图让其中一个图表在页面加载时显示画笔和范围，但是当我在一个图表上使用 .filter 尝试此操作时，其他图表被禁用。我也尝试过 .extent。

两个版本图表的图片：

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

我查看了一些关于 SO 的相关帖子，但它们并不是我所需要的。主要的crossfilter页面有一个例子，但是由于代码差异很大，我想看看我是否可以保留我有的，否则我将使用crossfilter页面代码。

更新： 这是一个 jsfiddle - http://jsfiddle.net/jth32/22/

这是条形图代码的一个小示例：

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

谢谢

【问题讨论】：

你的 jsfiddle 不适合我。
jsfiddle 已更新：jsfiddle.net/jth32/22 我已经在 javascript 中注释掉了第 358 行，这就是导致其他图表被禁用的原因。谢谢拉斯。
这里好像还是无法加载crossfilter...
这很不幸。我正在为所有外部资源使用 CDN 链接，所以我想知道为什么它们被阻止在那里。感谢您的尝试。
您的原始示例（第 358 行未注释）对我来说很好。我在深度图表上看到了过滤器，如果需要，我可以在其他图表上进行过滤。我在 Chrome 中 - 您在哪个浏览器中看到问题？

标签： d3.js brush dc.js crossfilter

【解决方案1】：

我发现这与我使用的 dc.js 版本有关。 github 上的最新版本（v2.0）是我所拥有的，但我在 jsfiddle 中使用的 CDN 链接使用的是 1.6.0 版本，并且正如 Ethan 提到的那样工作正常。一旦我在开发环境中切换到 1.6.0，就解决了我的问题。

我向 dc-js google 用户组发布了一条消息，如果这确实是 dc.js v2.0 中的错误，我将在此处添加另一条消息。

【讨论】：