динамически поддерживать значение оси x для прямоугольного элемента разных размеров на d3

Question

Я динамически создаю <rect> элементы различной ширины внутри <svg>, а также необходимо динамически поддерживать значение оси x.Попробуйте разные подходы, но иногда разрыв между двумя <rect> небольшой, а иногда большой.

Есть ли способ легко поддерживать это значение?Я искал везде, но не получил никакого подходящего ответа.

HTML -

<div class="canvas"></div>

JS -

var c = d3.select('.canvas').append('svg');
var d = [
  {width: 100, fill: 'tomato'},
  {width: 150, fill: 'skyblue'},
  {width: 200, fill: '#BADA55'}
];
c.attr('width', '100%').attr('height', '500');

c.selectAll('rect').data(d).enter()
.append('rect')
.attr('width', d=>d.width)
.attr('fill', d=>d.fill)
.attr('height', d=>d.width)
.attr('x', (d,i)=>i*(d.width));//here's the x axis value create dynamically

Ожидаемый результат будет поддерживать равный интервал между двумя <rect> элементов.Не появляется никаких ошибок в консоли (на случай, если вам интересно)