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

dc.js charts with 2 different datasets and one chart updating the other

我正在尝试使用 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) 清除过滤器。

太棒了!我更新了@YCuvelie 示例,对 D3 指令进行了少量修改,HERE 这是 D3.V5

的工作示例

而不是 d3.scale.linear() 使用 d3.scaleLinear() 并包含最新版本的 D3