为什么 dc.js 中的一个图表不能过滤另一个图表?

And*_*897 1 d3.js dc.js

我无法理解 dc 组如何绘制图表。这样一个过滤器的变化就会反映在所有其他过滤器上。我有一个带有两个系列图表的简单代码。当我在其中一个画笔上绘制画笔时,它不会过滤另一个画笔。不知道为什么?有人可以快速浏览一下小代码并提出建议吗?

d3.csv("data/compareData.txt", function(data) {

  ndx = crossfilter(data);
  runDimension = ndx.dimension(function(d) {return [+d3.time.format.iso.parse(d.timestamp), +d.meterid]; });
  frequencyGroup = runDimension.group().reduceSum(function(d) { return +d.frequency; });
  magnitudeGroup = runDimension.group().reduceSum(function(d) { return +d.magnitude; });


 frequencyChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(true)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .elasticY(true)
    .dimension(runDimension)
    .group(frequencyGroup)
    .mouseZoomable(false)
    .seriesAccessor(function(d) {return +d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  frequencyChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
  frequencyChart.margins().left += 40;

 magnitudeChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(true)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .elasticY(true)
    .dimension(runDimension)
    .group(magnitudeGroup)
    .mouseZoomable(false)
    .seriesAccessor(function(d) {return  +d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  magnitudeChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
  magnitudeChart.margins().left += 40;

      dc.renderAll();

});
Run Code Online (Sandbox Code Playgroud)

Cha*_*apo 5

您使用相同的维度对两个图表进行分组。

分组与交叉过滤器的当前过滤器相交,关联维度的过滤器除外。因此,组方法仅考虑满足除此维度过滤器之外的每个过滤器的记录。因此,如果付款的交叉过滤器按类型和总计进行过滤,则按总计分组仅观察按类型的过滤器。

来自crossfilter API 文档

一种解决方案是创建一个runDimension2类似的runDimension图表,并使用此维度来制作第二个图表。