【问题标题】:dc.js charts with 2 different datasets and one chart updating the otherdc.js 图表具有 2 个不同的数据集,一个图表更新另一个
【发布时间】:2016-12-23 15:49:29
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

    标签: dc.js


    【解决方案1】:

    你的想法是对的,只是数据不匹配。

    要理解的重要一点是,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】:

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

    使用d3.scaleLinear() 代替d3.scale.linear() 并包含最新版本的D3

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-31
      相关资源
      最近更新 更多