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

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

您正在将months变量从帖子绑定到文本您在g

svg

您正在引用名为column的数据中的成员，该成员不存在。您尚未包含定义比例x1的代码，但假设接受日期，您可以尝试使用x1(d3.time.format("%b").parse(d.key))代替x1(d.column)。
在绑定数据中，您已经对数组引用进行了字符串化，例如＆＃34; values [0]＆＃34;，但在您的代码中引用了d.values[i]，这在您提供的数据中不存在。您需要对元素的数值求和，如下所示：d3.sum(d3.values(d))。
您要从y值中减去60，这可能会将它们推到视口之外，总计已经使用.attr("dy", "1.35em")定位，所以如果您需要调整，请在那里进行调整。

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

＆＃13;

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

＆＃13;

svg { outline: 1px solid black;}

＆＃13;

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

＆＃13;

D3分组堆积条形图列总和

1 个答案: