无法水平堆叠矩形

Question

我只是想找到最简单/最崇高的方法来创建单行堆叠矩形。根据How to stack rects respective of previous rect's height? 使用let 计数器来存储先前的数据点可以工作，或者直接计算所有点也可以工作，如：http://bl.ocks.org/wpoely86/e285b8e4c7b84710e463。然而，对于看似简单的任务，这两个似乎都非常复杂：找到将矩形的x 放在哪里以及该矩形应该有多宽。我在这个 sn-p 中采用了下面的let 方法：

    var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

 var qScale = d3.scaleLinear()
    .range([749,0])
    .domain([0,20]);

var quartiles = [3.78, 6.69, 10.09];

let qCounter = 0;
let wCounter = 0;

graphGroup.selectAll('.markers')
    .data(quartiles)
    .enter()
    .append('rect')
    .attr('class', 'markers')
    .attr('x', function(d) {
      let previous = qCounter;
      return (qCounter += qScale(d), previous)
    })
    .attr('y', 50)
    .attr('width', function(d) {return 749-qScale(d); })
    .attr('height', 50)
    .style('fill', 'gray')
    .style('stroke', '3px');

<script src="https://d3js.org/d3.v5.min.js"></script>

它似乎无法正常工作，只有 2 个矩形。应该有 3 个，它们应该堆叠在一起。它们的宽度由quartiles 中的值决定。

问题

假设我的 .attr('x') 逻辑是正确的，我如何确定矩形的正确宽度？

我遇到了同样的问题，因为如果我想尝试将矩形的宽度计算为伪代码：qScale(d[1]) - qScale(d[0])，我无法在范围内引用前一个数据点。我必须为每个此类属性制作另一个计数器吗？我正在使用 d3 v5，真的没有更简单的方法可以找到用于堆叠矩形等的先前数据吗？

Answer 1

你的qScale 范围是倒置的，应该是：

.range([0, 749])

更好的是，您应该避免使用幻数：

.range([0, width])

完成后，将宽度更改为：

.attr('width', function(d) {
    return qScale(d);
})

这是带有这些更改的代码，并使用色标来区分条形：

var margins = {
  top: 20,
  bottom: 300,
  left: 30,
  right: 100
};

var height = 600;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var colors = d3.schemeCategory10;

var qScale = d3.scaleLinear()
  .range([0, width])
  .domain([0, 20]);

var quartiles = [3.78, 6.69, 10.09];

let qCounter = 0;
let wCounter = 0;

graphGroup.selectAll('.markers')
  .data(quartiles)
  .enter()
  .append('rect')
  .attr('class', 'markers')
  .attr('x', function(d) {
    let previous = qCounter;
    return (qCounter += qScale(d), previous)
  })
  .attr('y', 50)
  .attr('width', function(d) {
    return qScale(d);
  })
  .attr('height', 50)
  .style('fill', function(_, i) {
    return colors[i]
  })
  .style('stroke', '3px');

<script src="https://d3js.org/d3.v5.min.js"></script>