score:2

Accepted answer

You can manually calculate the x coordinate for each bar based on the preceding elements' values, which offsets the rect. The example below does that within a forEach loop.

    const abuseNeglectData = [
  {
    type: "Neglected-Related",
    data: 122214,
    color: "red",
  },
  {
    type: "Abuse-Related",
    data: 47364,
    color: "orange",
  },
  {
    type: "Other",
    data: 2972,
    color: "blue",
  },
];
dataSum = d3.sum(abuseNeglectData, d=>{return d.data})

let offset = 0

abuseNeglectData.forEach(function(d){
  d.offset = offset
  offset = offset + d.data
})


const width = 400,
  height = 100,
  bottom = 20,
  
      xScale = d3
    .scaleLinear()
    .range([0,width])
    .domain([
      0,dataSum
    ]);
    
 
    const svg = d3.select('body'/*'.graph-wrapper.abuse-neglect'*/).append('svg')
    .attr('width', width)
    .attr('height', height + bottom);
    
    svg.append('g').attr('class','bars').selectAll('rect')
    .data(abuseNeglectData)
    .enter()
    .append('rect')
    .attr('y', d=>{return 0})
    .attr('height',d=>{return height})
    .style('width',d=> {return xScale(d.data)+'px'})
    .style('fill', d=>{return d.color})
    .attr('x',d=>{return xScale(d.offset)})


    svg.append('g').attr('class','x-axis')
    .call(d3.axisBottom(xScale))
    .attr('transform',`translate(0,${height})`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


Related Query