具有 2 个不同数据集的 dc.js 图表,一个图表更新另一个

标签 dc.js

我正在尝试使用 dc.js 将 2 个不同的图表与两个不同的数据集连接起来。

第一个圆环图应该作为折线图的过滤器,但我还没有找到如何在两者之间建立联系。

我宁愿不加入这些数据集,因为它们可能会变大并且加入没有太大意义。

我试图捕捉选中的项目并在折线图中过滤它们

 sobRingChart.on('filtered', function(chart) {
   PUchart.filter(null)
   .filter(chart.filters());
   dc.redrawAll()
});

例子 http://jsfiddle.net/yccu/qBr7y/32/

最佳答案

您的想法是正确的,这只是数据不匹配。

需要理解的重要一点是,crossfilter 中的所有过滤都是通过维度对象进行的。您过滤的值需要与您过滤的维度兼容。

因此,由于您的折线图是基于时间的,因此您将无法按 Source 对其进行过滤。为此,您需要设置另一个维度:

var sourceDim2 = spendData2.dimension(function(d) { return d.Source; })

然后过滤该维度而不是折线图:

 sobRingChart.on('filtered', function(chart) {
   if(chart.filters().length)
     sourceDim2.filterFunction(function(k) {
       return chart.filters().indexOf(k) !== -1;
     });
   else sourceDim2.filter(null);
   dc.redrawAll()
 });

This is only complicated because it has to handle filtering on multiple values (when more than one slice of the ring chart is selected). Crossfilter 并没有那么简单,可能是因为它不是那么高效。 (这通常并不重要。)

所以我们需要看看有没有过滤器。如果有,我们设置一个过滤器函数,查看当前考虑的键是否在 chart.filters() 中。如果不是,我们调用 .filter(null) 来清除过滤器。

关于具有 2 个不同数据集的 dc.js 图表,一个图表更新另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41304327/

相关文章:

javascript - 在 dc.js 中更改图例值

javascript - 使用 dc.js 按条值对条形图中的条进行排序(排序)

d3.js - 如何使用 dc.js 显示行图表的底部数据

dc.js 动态瀑布图

javascript - 显示应用于一处多个图表的过滤器

javascript - 使用 d3 域调用更改 dc 直方图的存储桶

javascript - 每天使用 dc.js 进行规模化

dc.js - DC js图表,交叉过滤器不过滤点击

javascript - 具有单个键的多个值的 dc.js 散点图

dc.js - 如何使用画笔在 DC.JS 散点图中选取最高点