Question

提前感谢您的帮助。

我是D3和javascript的新手。我已经相当坚持了一段时间，现在甚至搜索其他类似的帖子。

我想适当地翻转我的堆积条形图，使其与SVG的底部对齐。

当我按照我认为应该完成的方式尝试时，我会得到一个＆＃34;＆＃39;＆＃39;＆＃39;＆＃39;消息。

var dataset = [
    [
      { x: 0, y: 5 },
      { x: 1, y: 4 },
      { x: 2, y: 2 },
      { x: 3, y: 7 },
      { x: 4, y: 23 }
    ],
    [
      { x: 0, y: 10 },
      { x: 1, y: 12 },
      { x: 2, y: 19 },
      { x: 3, y: 23 },
      { x: 4, y: 17 }
    ],
    [
      { x: 0, y: 22 },
      { x: 1, y: 28 },
      { x: 2, y: 32 },
      { x: 3, y: 35 },
      { x: 4, y: 43 }
    ]
  ];

  //Width and Height
var w = 500;
    h = 300;


  //Create SVG canvas
  var svg = d3.select('body').append('svg')
            .attr('width', w)
            .attr('height', h);

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

  //Stack dataset 
    stack(dataset);

  //Create scales
var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset[0].length))
            .rangeRoundBands([0,w], 0.05);

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

  //Create colors for scale 
var colors = d3.scale.category10();

  //Create a Group for each row of data
var groups = svg.selectAll('g')
            .data(dataset)
            .enter()  //only creates placeholder
            .append('g')  //creates group
            .style('fill', function(d, i) {
              return colors(i);
            });

  //Add a rectangle for each datavalue 
      var rects = groups.selectAll("rect")
    .data(function(d) { return d; })
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return xScale(i);
    })
    .attr("y", function(d) { return yScale(d.y0 + d.y); })
    .attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); })
    .attr("width", xScale.rangeBand());

Answer 1

我认为您需要更改为每个条形计算高度的方式。见this plnkr。这是你在寻找的东西吗？也许你可以使用高度（h）变量进行计算。我改变了如下的y参数。

 //Add a rectangle for each datavalue 
var rects = groups.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(i);
  })
  /*  .attr("y", function(d) { return yScale(d.y0 + d.y); })
   .attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); })

            .attr("y", function(d) { return yScale(d.y0 ); })
   .attr("height", function(d) { return yScale(d.y0 + d.y);})
   */

.attr("y", function(d) {
    return yScale(d.y0 + d.y);
  })
  .attr("height", function(d) {
    return h - yScale(d.y0 + d.y);
  })
  .attr("width", xScale.rangeBand());

将堆积的条形图对齐到图表的底部

1 个答案: