我正在编写一个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 回答
看起来您的所有图表都基于单一维度 . Crossfilter过滤器应用于维度,不适用于与过滤器相同维度的组 . 因此,应用过滤器时,在同一维度上定义的图表不会更改 . 我建议你为每个图表定义新的尺寸 .