在 d3 中堆叠矩阵而不重新映射到 json

The docs https://github.com/d3/d3-shape/blob/master/README.md#stacks对于d3的堆叠功能d3.stack显示一个包含对象数组的示例（每个 json 对象代表 x 轴测量的点的集合）。例如：

var data = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 720}
]

我正在尝试生成一个带有数据系列矩阵的堆叠直方图（[ [], [], [], etc ]）。迭代行并获取一系列直方图箱（在其他地方预定义了 x 比例和域）非常容易：

for(let i=0; i<data.length; i++){
    bins[i] = d3.histogram()
            .domain(x.domain())
            .thresholds(x.ticks(10))
            (data[i]);
    }

并为另一个循环内的每个数据系列创建组：

let bars = this.svg.selectAll(".series" + i)
    .data(this.bins[i])
    .enter().append("g")
    .classed("series" + i, true)

但当然这样做我会被困在这里。我该怎么办bars.append("rect")该特定系列的正确 x,y 坐标？换句话说，我有一个非常有用的数组bins目前，看起来像：

[
  [[1,2,3,3], [5,8,9], [10], ... etc], //series0 grouping by bins of 5
  [[1,3], [7,7,9,9], [11], ... etc], //series1
  [[2,3,3], [8,9], [10,12], ... etc], //series2
  ...etc
]

有没有办法调用stack不用将所有数据都整理成 json 键、值对？

我看了一眼来源 https://github.com/d3/d3-shape/blob/master/src/stack.js并且没有注释+单个字符变量=我理解如果不进行修改就不会发生这种情况。因此，我提出了我为节省别人时间而做出的拙劣尝试：

/*
 * Static helper method to transform an array of histogram bins into an array of objects
 * suitable for feeding into the d3.stack() function.
 * Args:
 *  bins (array): an array of d3 histogram bins
 */
static processBins(bins){
    let temp = {}; // the keys for temp will be the bin name (i.e. the bin delimiter value)
    // now create an object with a key for each bin, and an empty object as a placeholder for the data
    bins[0].map( (bin) => { temp[bin.x0] = {}});
    for(let i=0; i<bins.length; i++){
        //traverse each series
        bins[i].map( bin => { 
            temp[bin.x0]["series"+i] = bin.length; //push the frequency counts for each series
        });
    }
    /* now we have an object whose top-level keys are the bins:
    { 
        binName0: { series0: freqCount0, series1: freqCount1, ...},
        binName1: {...},
        ...
    }
    now, finally we're going to make an arrays of objects containing all the series' freqencies for that bin
    */
    let result = [];
    for(let binName in temp){                       // iterate through the bin objects
        let resultRow = {};
        if(temp.hasOwnProperty(binName)){
            resultRow["bin"] = binName;             //put the bin name key/value pair into the result row
            for(let seriesName in temp[binName]){   //iterate through the series keys
                if(temp[binName].hasOwnProperty([seriesName])){
                    resultRow[seriesName] = temp[binName][seriesName];
                }
            }
        }
        result.push(resultRow);
    }
    return result;
}

打电话像：

let stack = d3.stack().keys( bins.map( (d,i)=>{return "series"+i})); //stack based on series name keys
let layers = stack(MyCoolHistogram.processBins(bins));
//and now your layers are ready to enter() into a d3 selection.

编辑： 我注意到匿名函数中的堆栈数据第三个参数似乎是元素数组。 IE。它不再是堆栈层索引。例如，当并排分组条形时：http://bl.ocks.org/mbostock/3943967 http://bl.ocks.org/mbostock/3943967

这会破坏依赖此索引号来计算 x 位置的分组函数：

rect.attr("x", (d,i,j) => { return x(d.data.bin) + j*barWidth/numberOfSeries});

我想这表明 Mike 的要点仍然使用 v3，尽管在 v4 发布很久之后才进行了更新。

要获取图层索引，您必须使用layer.index直接属性。因此，在分组时，您将平移整个图层（当然，这会搞砸逐条动画......叹息）。

let layers = d3.stack(yourData);
let layer = this.svg.selectAll(".layer")
            .data(layers)
layer.transition()
    .attr("transform", d => { return "translate(" + d.index*barWidth/numberOfSeries + ",0)"; });