动态维护x3值以适应d3上不同大小的rect元素

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>元素之间保持相等的间距。在控制台中没有出现任何错误（以防万一）