D3分组堆积条形图柱形求和

Question

我有一个分组堆积条形图，如图所示，http://pasteboard.co/1BKMicBq.jpg 我想将各个条形图的总和相加，如图所示。 我有一个数据集，其中包含准备显示的总和值，看起来像，

var months= [
{  "key": "Jan",
  "values[0]": 25000,
  "values[1]": 25000,
  "values[3]": 25000
       },  {  "key": "Feb",
  "values[0]": 25000,
  "values[1]": 25000,
  "values[3]": 25000
       },
         {  "key": "March",
  "values[0]": 25000,
  "values[1]": 25000,
  "values[3]": 25000
       }
 ]

我已经使用以下代码进行了尝试，但我无法获取每个条形图上的数据。

var project_stackedbar = svg.selectAll(".project_stackedbar")
    .data(data)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function (d) { return "translate(" + x0(d.Month) + ",0)"; });

project_stackedbar.selectAll("rect")
    .data(function (d) { return d.columnDetails; })
    .enter()
    .append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function (d) {
        return x1(d.column);
    })
    .attr("y", function (d) {
        return y(d.yEnd);
    })
    .attr("height", function (d) {
        return y(d.yBegin) - y(d.yEnd);
    })
    .style("fill", function (d) { return color(d.name); });
var sum = 0;

project_stackedbar.selectAll("text")
    .data(function (d) { return d.columnDetails; })
    .enter()
    .append("text")
    .attr("x", function (d) { return x1(d.column) })
    .attr("y", function (d) {
    return y(d.yEnd) + 15;})
    .text(function (d) {if (d.yEnd - d.yBegin !== 0) return "$" + (d.yEnd - d.yBegin);});

columns = svg.append("g")
      .selectAll("text")
    .data(months)
      .enter().append("text")
      .attr("x", function (d) {
          return (x1(d.column));
      })
      .attr("y", function (d, i) {
          return y(d.values[i]) - 60;
      })
      .attr("dy", "1.35em")
      .attr('style', 'font-size:13px')
      .text(function (d, i) {
          if (d.values !== 0) return d3.format("$")(d.values[i]);
      })
      .style({ fill: 'black', "text-anchor": "middle" });

在这里，我只能获得 3 个值，这些值将打印在第一组条形图中。我无法在图中获得正确的 x 轴位置。任何人都可以在这里指导我我错了吗？

Answer 1

我假设您所指的代码部分是这个......

  columns = svg.append("g")
    .selectAll("text")
    .data(months)
    .enter().append("text")
    .attr("x", function (d) {
      return (x1(d.column));
    })
    .attr("y", function (d, i) {
      return y(d.values[i]) - 60;
    })
    .attr("dy", "1.35em")
    .attr('style', 'font-size:13px')
    .text(function (d, i) {
      if (d.values !== 0) return d3.format("$")(d.values[i]);
    })
    .style({ fill: 'black', "text-anchor": "middle" });

这是您尝试从我链接的示例中重复使用的部分，在该示例中它正在计算总计。因此我的假设......

1. 您正在将 months 变量从您的帖子绑定到文本 您在g 在svg 上创建的元素
2. 您在该数据中引用了一个名为column 的成员，该成员不存在。您尚未包含定义比例 x1 的代码，但假设它接受日期，您可以尝试使用 x1(d3.time.format("%b").parse(d.key)) 而不是 x1(d.column)。
3. 在绑定的数据中，您有字符串化的数组引用，例如“values[0]”，但在您的代码中，您引用的 d.values[i] 在您提供的数据中不存在。您需要对元素的数值求和，如下所示：d3.sum(d3.values(d))。
4. 您正在从您的 y 值中减去 60，这可能会将它们推到视口之外，总数已经用.attr("dy", "1.35em") 定位，所以如果您需要调整，请在此处进行。

鉴于所有这些，我猜你需要这样的东西：

  var months= [
    {  "key": "Jan",
      "values[0]": 25000,
      "values[1]": 25000,
      "values[3]": 25000
    },  {  "key": "Feb",
      "values[0]": 15000,
      "values[1]": 25000,
      "values[3]": 25000
    },
    {  "key": "March",
      "values[0]": 5000,
      "values[1]": 25000,
      "values[3]": 25000
    }
  ];
  var margin = {top: 20, right: 50, bottom: 35, left: 50};

  var width = 760 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;



  var svg = d3.select("body")
    .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 + ")");

  var x1 = d3.scale.ordinal()
    .domain(months.map(function(d) { return d.key; }))
    .rangeRoundBands([10, width-10], 0.35);
  var y = d3.scale.linear()
    .domain([0, d3.max(months, function(d) {  return d3.sum(d3.values(d)); })])
    .range([height, 0]);

  columns = svg.append("g")
    .selectAll("text")
    .data(months)
    .enter().append("text")
    .attr("x", function (d) {
      return (x1(d.key));
    })
    .attr("y", function (d, i) {
      return y(d3.sum(d3.values(d)));
    })
    .attr("dy", "1.35em")
    .attr('style', 'font-size:13px')
    .text(function (d, i) {
      return d3.format("$")(d3.sum(d3.values(d)));
    })
    .style({ fill: 'black', "text-anchor": "middle" });

svg { outline: 1px solid black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>