javascript - 如何在 d3 js 中对齐堆栈图中的条形图？

嗨，因为我正在尝试使用 d3.js 对齐水平堆叠条形图。这里我使用d3.stack()方法来生成堆叠条。这适用于一组数据

dataset = [{
  "goodRating": 12,
  "avgRating": 12,
  "badRating": 12,
}]

但是当我试图将数据更改为

dataset = [{
  "goodRating": 2344412,
  "avgRating": 23234434,
  "badRating": 443333,
}]

这可行，但对齐不适合图表宽度。因为我想将 svg 内的条形图调整为 100%。请检查我的小提琴可以请告诉我我错过了什么。谢谢

标签： javascriptd3.js

尝试设置width和百分比xrect

attr('width', function(d) {
   return (d[1] - d[0]) + '%';
})
.attr('x', function(d) {
    return d[0] + '%';
})

演示