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

Question

我正在编写一个网络应用程序，它允许用户使用 dc.js 动态创建一个或多个图表。用户可以指定一些过滤器参数，每次检索生成的 JSON 并加载到一个新的 dc.js 条形图中。

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

我有一个数据数组，所有数据都被加载到其中（因此，如果他们添加另一个图表，数据将添加到现有数组中），并且我将交叉过滤器对象指向它。我知道 crossfilter 不支持更新数据，所以每次更改数组时，我都会重新创建 crossfilter 对象。所有图表都使用相同的维度和比例对象，这些对象也是根据新数据重新创建的。

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

[
  {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

您的所有图表似乎都基于一个维度。交叉过滤器过滤器应用于维度，并且不应用于与过滤器相同维度上的组。因此，在应用过滤器时，在同一维度上定义的图表不会改变。我建议您为每个图表定义新维度。