D3 多列相对堆栈图

Question

我目前正在修改以下示例以生成多水平相对堆栈图。以下示例是 "single" 堆栈图示例。

这是我的版本，但是我得到了 NaN X 和 Width 值，我想找出原因。谢谢。

在 SVG 中，每个的结构如下：-

g[ g [rect, rect, rect]], g[ g [rect, rect, rect]]

这是我的代码：http://jsfiddle.net/scottietom/7c3vb4e9/

        var dataset = [
                       [
                        [{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]], 
                        [[{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]]
                      ];

        //Set up stack method
        var stack = d3.layout.stack();

        //Data, stacked
        for (i=0; i<dataset.length; i++) {
          stack(dataset[i]);
        }

        //Set up scales
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d3.max(d, function (d) {
                return d.y0 + d.y;
            });
        })])
        .range([0, w]);

        //Easy colors accessible via a 10-step ordinal scale
        var colors = d3.scale.category10();
        //or make your own colour palet
        var color = d3.scale.ordinal()
            .range(["#1459D9", "#148DD9", "#87ceeb", "#daa520"]);

        //Create SVG element
        var svg = d3.select(".pathanalysis_diagram")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Add a group for each row of data
        var groups = svg.selectAll("g")
            .data(dataset)
            .enter()
            .append("g")
            .style("fill", function (d, i) {
            return color(i);
        });

        // Add a rect for each data value
        var rects = groups.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter()
            .append("rect")
            .attr("x", function (d) {
                return xScale(d.y0);
            })
            .attr("y", 50)
            .attr("height", 50)
            .attr("width", function (d) {
                return xScale(d.y);
            });

Answer 1

这是一个包含您的解决方案的 JSFiddle：http://jsfiddle.net/ee2todev/z73u6mro/

我将嵌套数据集命名为 arrayOfDatasets，因此更改变得更加清晰。首先，您必须为每个数据集调用 stack()：

arrayOfDatasets.forEach(function (dataset) {stack(dataset); });

然后您必须检索 xScale 的最大值：

var xScale = d3.scale.linear()
    .domain([0, d3.max(arrayOfDatasets, function (dataset) {      
      return d3.max(dataset, function (d) {
        return d3.max(d, function (d) {
            return d.y0 + d.y;
        });
      })
    })])
    .range([0, w]);

最后，您只需正确访问数据并转换数据集，使它们不重叠：

var groupOfGroups = svg.selectAll("g.toplevel")
    .data(arrayOfDatasets)
    .enter()
    .append("g")
    .attr("class", "toplevel")
    .attr("transform", function(d, i ) {return "translate(0, " + (-i * 55) + ")"; });   

// Add a group for each row of data
var groups = groupOfGroups.selectAll("g.dataset")
    .data(function(d) {return d; })
    .enter()
    .append("g")
    .attr("class", "dataset")
    .style("fill", function (d, i) {
    return color(i);
});

您可能仍会以不同方式存储数据集，因为不清楚为什么其中包含 x 值。

D3 多列相对堆栈图

D3 Multicolumn Relative Stack Chart

javascript

svg

data-visualization

d3.js