Javascript D3分组堆叠条形图列总和

我有一个分组的堆叠条形图，如图所示， 我想将各个条的总和相加，如图所示。 我有一个数据集，该数据集具有可显示的汇总值，如下所示：

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轴位置。有人能给我指点迷津吗

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

  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" });

这是您试图从我链接的示例中重复使用的部分，在该示例中，它正在进行合计。因此我假设

您正在将post中的

months

变量绑定到文本 在

svg

上的

g

上创建的元素

您正在引用名为

列的数据中不存在的成员。您没有包含定义刻度的代码
x1
，但是，假设它是接受日期，您可以尝试
x1（d3.time.format（“%b”）.parse（d.key））
而不是
x1（d.column）

在绑定数据中，您有字符串化的数组引用，如“值[0]”，但在代码中，您引用的是

d.values[i]

，而您提供的数据中不存在该值。您需要像这样对元素的数值求和：

d3.sum（d3.values（d））

您正在从y值中减去60，这可能会将它们推到视口之外，总数已经用

.attr（“dy”，“1.35em”）

定位，因此如果需要调整，请在那里进行 考虑到所有这些，我想你需要这样的东西：

var月=[
{“key”：“Jan”，
“值[0]”：25000，
“值[1]”：25000，
“值[3]”：25000
}，{“key”：“Feb”，
“值[0]”：15000，
“值[1]”：25000，
“值[3]”：25000
},
{“关键”：“前进”，
“值[0]”：5000，
“值[1]”：25000，
“值[3]”：25000
}
];
var-margin={顶部：20，右侧：50，底部：35，左侧：50}；
变量宽度=760-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x1=d3.scale.ordinal（）
.domain（months.map（函数（d）{return d.key；}））
.范围圆带（[10，宽度-10]，0.35）；
变量y=d3.scale.linear（）
.domain（[0，d3.max（月，函数（d）{返回d3.sum（d3.values（d））；}）]）
.范围（[高度，0]）；
columns=svg.append（“g”）
.selectAll（“文本”）
.数据（月）
.enter（）.append（“文本”）
.attr（“x”，函数（d）{
返回（x1（d键））；
})
.attr（“y”，函数（d，i）{
返回y（d3.和（d3.值（d））；
})
.attr（“dy”，“1.35em”）
.attr（'style'，'font size:13px'）
.文本（功能（d，i）{
返回d3.format（“$”）（d3.sum（d3.values（d））；
})
.style（{fill:'黑色'，“文本锚定”：“中间”}）
svg{outline:1px纯黑色；}
通过查看同一个示例，我尝试了酷蓝的可能重复，但我无法正确分配var月值。我只得到前3个值。好吧，好吧，你不发布一个工作示例的想法是什么？在本文中使用代码片段工具很容易做到这一点。