Creating stacked charts in dc js with panel dataset

问题

I'm having trouble creating a stacked barchart, I cannot figure out how to properly apply the dimensions to a panel dataset

My data looks like this:

Date     name   value
12/1/15 name1  5
12/1/15 name2  6
12/1/15 name3  2

13/1/15 name1  2
13/1/15 name2  7
13/1/15 name3  8

14/1/15 name1  2
14/1/15 name2  5
14/1/15 name3  10

Stored in JSON format

I would like to create stacked charts that plot the values associated with the different names over time.

As I understand dc-js I need to provide a chart with the date dimension, and then another dimension by the different names which then groups the values, however I am unsure how to proceed.

Does anyone know how I can do this with?

回答1:

Here's how to produce the group, from the FAQ:

var group = dimension.group().reduce(
    function(p, v) { // add
        p[v.type] = (p[v.type] || 0) + v.value;
        return p;
    },
    function(p, v) { // remove
        p[v.type] -= v.value;
        return p;
    },
    function() { // initial
        return {};
    });

(In your case, v.name instead of v.type.)

Basically you create a group which reduces to objects containing the values for each stack.

Then use the name and accessor parameters of .group() and .stack(). Unfortunately you have to spell it out, as the first has to be .group and the rest .stack.

As so:

chart.group(group, 'name1', function(d) { return d.name1; })
   .stack(group, 'name2', function(d) { return d.name2; })
   .stack(group, 'name3', function(d) { return d.name3; })
   ...

(Somewhere on SO or the web is a loop form of this, but I can't find it ATM.)

来源：https://stackoverflow.com/questions/32630651/creating-stacked-charts-in-dc-js-with-panel-dataset

标签

javascript

d3.js

dc.js