首页 文章

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

提问于
浏览
0

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

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

我有一个数据数组,所有数据都被加载到(所以如果他们添加另一个图表,数据被添加到现有数组中),我有指向此的crossfilter对象 . 我知道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();
});

不幸的是,我的代码在离线系统上,因此整个页面不容易共享 . 有人可以建议我可能会缺少什么吗?

1 回答

  • 3

    看起来您的所有图表都基于单一维度 . Crossfilter过滤器应用于维度,不适用于与过滤器相同维度的组 . 因此,应用过滤器时,在同一维度上定义的图表不会更改 . 我建议你为每个图表定义新的尺寸 .

相关问题