javascript - d3 js中带有数据数组的堆积图

Question

我已尝试借助此链接自定义堆叠条形图的现有代码 https://bl.ocks.org/mbostock/1134768 .

我在给定链接的帮助下完成了这张图，但我对 y 轴上的数据点有些困惑，如下图所示

这是我的堆叠条形图的完整代码

var data = [
    {month: 'Jan',total:100 ,A: 35, B: 5, C: 10},
    {month: 'Feb',total:200 ,A: 30, B: 10, C: 20},
    {month: 'Mar',total:300 ,A: 0, B: 10, C: 20}
];

var xData = ["A", "B", "C"];

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

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
      xData.forEach(function(c) {
        d[c] = +d[c];}); })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};});});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x; }));

y.domain([0,d3.max(dataStackLayout[dataStackLayout.length - 1],
            function (d) { return d.y0 + d.y;}) ]).nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);});

layer.selectAll("rect")
        .data(function (d) {
            return d;})
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);})
        .attr("y", function (d) {
            return y(d.y + d.y0);})
        .attr("height", function (d) {               
            return y(d.y0) - y(d.y + d.y0); })
        .attr("width", x.rangeBand() -1);

svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);  

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

由于我已从给定的 url 获得帮助，因此我更改了我的代码，将数组数据而不是 CSV 文件作为输入。但我认为我在 y 轴上的数据点(标签)不符合给定数据(键:总计)。

如有任何帮助，我们将不胜感激。

Answer 1

这是关于如何在 y 轴上显示总数的困惑的解决方案 因为在我的数组数据中有一个键“total”，它是数组数据中显示的所有状态的总数，例如“A”、“B”和“C”

    var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

因为数组数据中有一个总键，所以我必须在 y 轴上显示为标签。这是我的完整代码

 var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

var xData = ["A", "B", "C"];

  var parseDate = d3.time.format("%m/%Y").parse;

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

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.category20();
//console.info(color(0));

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#pie").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
      d.month = parseDate(d.month);
      xData.forEach(function(c) {
        d[c] = +d[c];
      });

    })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};
    });
});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x;
}));

y.domain([0,
   d3.max(data, function(d) { return d.total; })
    ])
  .nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);
        });

layer.selectAll("rect")
        .data(function (d) {
            return d;
        })
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);
        })
        .attr("y", function (d) {
            return y(d.y + d.y0);
        })
        .attr("height", function (d) {
            // console.info(d.y0, d.y, y(d.y0), y(d.y))
            return y(d.y0) - y(d.y + d.y0);
        })
        .attr("width", x.rangeBand() -1);


svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
}