d3 v4：将堆栈与直方图数据一起使用？

Question

I have a bunch of data that is one of six categories, each piece of data has a time associated with it. I need to use a histogram to bin these data into monthly bins, which is easy, but I also need to stack each category. I've been looking for a stacked histogram example but the only ones I can find are from d3 v3, which is apparently very different in its stacking API. Right now I'm stuck in that after calling stack() I get nonsensical data back, which I can't use to generate a stacked bar chart.

                var data = this.data;
                var margin = {top: 20, right: 20, bottom: 30, left: 50},
                    width = this.width - margin.left - margin.right,
                    height = this.height - margin.top - margin.bottom;


                data.forEach(function(d) {
                    d.date = d3.isoParse(d.createdDate);
                });

                // set the ranges
                var x = d3.scaleTime()
                    .domain(d3.extent(data, function(d) { return d.date; }))
                    .rangeRound([0, width]);
                var y = d3.scaleLinear()
                    .range([height, 0]);
                var colours = d3.scaleOrdinal(d3.schemeCategory10);

                var svg = d3.select(this.$.chart);
                var svg2 = svg.select("#canvas");

                var histogram = d3.histogram()
                    .value(function(d) { return d.date; })
                    .domain(x.domain())
                    .thresholds(x.ticks(d3.timeMonth));

                var dataGroupedByType = d3.nest()
                    .key(function(d) {
                        return d.type;
                    })
                    .object(data, d3.map);

                var histDataByType = [];
                for (var key in dataGroupedByType) {
                    var histData = histogram(dataGroupedByType[key]);
                    histDataByType.push({type: key, values: histData});
                }

                var stack = d3.stack()
                    .keys(["A","B","C","D","E","F"])
                    .value( function(d, key) {
                        return d.values;
                    });

                var stackedHistData = stack(histDataByType);

dataGroupedByType is an object with six keyed objects (A through F), which each contain an array of data objects. Then I make histDataByType which results in an array of 6 objects, each of which have a type property (A through F) and a values array, which is always the same length (91 in my case, since my data spans 91 months). Within that array is another array with bin data (if any exists), and the x0 and x1 values. At this point, the binning has been done, all I need is to stack everything and get the y0 and y1 values.

So, I call stack , but it gives me garbage out; stackedHistData is an array of 6, each array has a 0 property which equals 0, a 1 property that equals 'NaN', and a data property that has that 91-long array, the index, and the key (A through F). I'm not even seeing the y0 and y1 values that are meant to be generated by the stack call. How is it meant to be used with this kind of histogram data?

Answer 1

Figured this out eventually. I basically attempted to emulate the data structure found here .

Firstly I acquired the keys from the data as well as parsing the times.

var keys = [];
data.forEach(function(d) {
    d.date = d3.isoParse(d.relevantDate);
    keys.push(d.type);
});

keys = _.uniq(keys);

Here I'm using the lodash library to unique-ify my array of keys. The next step is to make the bins as you would normally do for a histogram:

var histogram = d3.histogram()
    .value(function(d) { return d.date; })
    .domain(x.domain())
    .thresholds(x.ticks(d3.timeMonth));

var bins = histogram(data);
y.domain([0, d3.max(bins, function(d) { return d.length; })]);

The domain can be declared here too. Now comes the fun part:

var stackData = [];
for (var bin in bins) {
    //console.log(bins[bin].x0, bins[bin].x1)
    var pushableObject = {};
    // add the time boundaries.
    pushableObject.x0 = bins[bin].x0;
    pushableObject.x1 = bins[bin].x1;
    // for each bin, split the data into the different keys.
    bins[bin].forEach(function(d) {
        //console.log(d);
        if (!pushableObject[d.type]) { pushableObject[d.type] = [d]}
        else pushableObject[d.type].push(d);
    })
    // if any of the keys didn't get represented in this bin, give them empty arrays for the stack function.
    keys.forEach( function(key) {
        if (!pushableObject[key]) {
            pushableObject[key] = [];
        }
    })

    stackData.push(pushableObject);
}

I make an empty stackData var, and loop through the bins. For each bin I populate an object with x0 and x1, since those are going to be needed for drawing the chart. Then, I do a foreach loop on the bin which loops over each data item stored within. The storage object gets one array per type (aka key) in this loop. Then there's a backup loop afterwards to catch any types that weren't represented in this bin, so that the stack function can function correctly. Speaking of that, here it is:

var realStack = d3.stack()
    .keys(keys)
    .value(function(d, key) {
        return d[key].length;
    });

It's pretty simple now that we have all the data massaged properly. It just needs to get the length of the data buckets instead of the data itself. Then just use that stack function when appending rects and pass it the stackData variable, and all will work out.