d3js-水平轴上的堆叠条形图-我如何设置x以使条形分开？

Question

目前我正在编写一个水平轴上的堆叠条形图的代码。但是我不知道如何设置.attr（x,...）来确保输入的每个rect都在条的末尾，从而填满空间。你能帮忙吗？

const bars = d3.select('#bars').append('svg').attr('width', 800).attr('height', 200);

d3.json('HHPro.json').then(data => { 
var bar1Data = [{
    position: 1,
    label: '70k',
    value: data.lemon.HH_Income.seventyK //1000
  },
  {
    position: 2,
    label: '71K - 149K',
    value: data.lemon.HH_Income.seventyoneK_onefortynineK // 800
  },
];

//sort bars based on value
bar1Data = bar1Data.sort(function(a, b) {
  return d3.descending(a.value, b.value);
})

console.log(d3.sum(bar1Data, d => d.value))

var colorScale = d3.scaleOrdinal()
  .range(["#E8A82B", "#000000"]);

const x = d3.scaleLinear()
  .domain([0, d3.sum(bar1Data, d => d.value)])
  .range([0, 800]);

y = d3.scaleLinear()
  .domain([0, d3.max(bar1Data).value])
  .rangeRound([200])


//Join data to rects

const rects = bars.selectAll('rect')
  .data(bar1Data)

rects
  .attr('width', (bar1Data) => {
    return x(bar1Data.value)
  })
  .attr('height', 100)
  .attr('x', 20)
  .attr('y', 20)

rects.enter()
  .append('rect')
  .attr('width', (bar1Data) => {
    return x(bar1Data.value)
  })
  .attr('height', 200)
  .attr('x', 0) //BUT WHAT IS THIS??
  .attr('y', 100)
  .style("fill", (d, i) => colorScale(i));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="bars"></div>

Answer 1

如果我正确理解你的问题，你想把杠叠起来。有两种方法可以做到。第一种是手工完成，正如我在你的另一个问题中所展示的：

const bars = d3.select('#bars').append('svg').attr('width', 800).attr('height', 200);

var bar1Data = [{
    position: 1,
    label: '70k',
    value: 1000
  },
  {
    position: 2,
    label: '71K - 149K',
    value: 800
  },
];

//sort bars based on value
bar1Data = bar1Data.sort(function(a, b) {
  return d3.descending(a.value, b.value);
})

console.log(d3.sum(bar1Data, d => d.value))

var colorScale = d3.scaleOrdinal()
  .range(["#E8A82B", "#000000"]);

const x = d3.scaleLinear()
  .domain([0, d3.sum(bar1Data, d => d.value)])
  .range([0, 800]);

y = d3.scaleLinear()
  .domain([0, d3.max(bar1Data).value])
  .rangeRound([200])

//Join data to rects

const rects = bars.selectAll('rect')
  .data(bar1Data)

rects
  .attr('width', (d) => {
    return x(d.value)
  })
  .attr('height', 100)
  .attr('x', 20)
  .attr('y', 20)

rects.enter()
  .append('rect')
  .attr('width', (d) => {
    return x(d.value)
  })
  .attr('height', 200)
  .attr('x', function(d, i) {
    // Note that I use `.map` here to take only the `.value` attribute
    // from the data and create an array of numbers. Then I pass it to `x`
    // to be transformed (could also be the other way around if you'd like,
    // so sum(bar1Data.map((e) => x(e.value)), 0, i)
    return x(sum(bar1Data.map((e) => e.value), 0, i));
  })
  .attr('y', 100)
  .style("fill", (d, i) => colorScale(i));

function sum(array, start, end) {
  var total = 0;
  for (var i = start; i < end; i++) total += array[i];
  return total;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="bars"></div>