动态创建和链接dc.js图表

Question

我正在编写一个web应用程序，允许用户使用dc.js动态创建一个或多个图表。用户可以指定一些筛选器参数，每次都会检索得到的JSON并加载到一个新的dc.js条形图中。

不过，我想要的是将所有图表链接起来，这样，如果他们在图表上过滤，对其他人也是如此，如果他们在图表上缩放/滚动，这也会发生在其他图表上。它们都在x轴(日期)上共享相同的数据范围。我的理解是，这正是dc.js的作用所在。

我有一个数据数组，所有的数据都被加载到其中(因此，如果它们添加了另一个图表，数据将被添加到现有的数组中)，并且我的交叉筛选器对象指向了这一点。我知道交联过滤器不支持更新数据，所以每次我改变数组时，我都会重新创建交叉过滤器对象。所有图表都使用相同的维度和缩放对象，这些对象也是在新数据上重新创建的。

添加了两组数据的数据数组如下所示：

[
  {dd: [Date object], date: "2015-09-14", count-1: 5, count-2: 23},
  {dd: [Date object], date: "2015-09-15", count-1: 3, count-2: 6},
  {dd: [Date object], date: "2015-09-16", count-1: 8, count-2: 34}
]

我的重新加载功能如下所示：

function reloadData(){
  cf = crossfilter(allData);
  dimension = cf.dimension(function(d) { return d.dd } );
  scale = d3.time.scale().domain([allData[0].dd, allData[data.length - 1].dd]);
}

我创建的图表如下：

var chart = dc.barChart(id);
d3.json(url, function(error, json){
  //Load JSON into array here

  reloadData();

  var group = dimension.group().reduceSum(function(d) { return +d["count-"+id]; } );

  chart
    .dimension(dimension)
    .group(group)
    .x(scale)
    .xUnits(d3.time.days)
    .elasticY(true)
    .brushOn(true)
    .title(function(d) { return d.data.value; })
    .centerBar(true)
    .width(1140);
  chart.render();
  dc.redrawAll();
});

不幸的是，我的代码在离线系统上，所以整个页面不容易共享。有人能告诉我我可能错过了什么吗？

Answer 1

看起来你所有的图表都是基于一个维度的。交叉筛选器应用于维度，而不应用于与筛选器相同维度上的组。因此，在相同维度上定义的图表在应用过滤器时不会改变。我建议您为每个图表定义新的维度。