Dynamically Creating and Linking dc.js Charts

I am writing a web app that allows users to dynamically create one or more charts using dc.js. The user can specify some filter parameters, and the resulting JSON is retrieved and loaded into a new dc.js bar chart each time.

What I want though is for all the charts to be linked, so that if they filter on a chart it does the same on others, and if they zoom/scroll on a chart this also happens on the others. They all share the same data range on the x-axis (date). My understanding was that this is exactly what dc.js is for.

I have a single data array that all the data is being loaded into (so if they add another chart, the data is added into the existing array), and I have the crossfilter object pointed at this. I'm aware that crossfilter doesn't support updating data, so every time I change the array I recreate the crossfilter object. All the charts are using the same dimension and scale objects, which are also recreated on new data.

The data array, with two sets of data added, looks like:

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

My reload function looks like:

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]);
}

I create the chart as follows:

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();
});

My code is unfortunately on an offline system, so the whole page isn't easy to share. Can anyone suggest what I might be missing though?

---

It looks like all your charts are based on a single dimension. Crossfilter filters are applied on a dimension and do not apply to groups on the same dimension as the filter. Therefore, charts defined on the same dimension will not change when filters are applied. I'd recommend you define new dimensions for each chart.

链接地址: http://www.djcxy.com/p/32738.html

上一篇: 在Crossfilter / dc.js中伪造群组过滤

下一篇: 动态创建和链接dc.js图表