如何在d3中绘制具有预定义起始位置和边距级别的矩形堆栈

这是JSFiddle。
当定义起始位置和垂直边距并使用数组中的数据时，我想要一个整齐的svg矩形堆栈。
在JSfiddle中，对输出容器进行了手动编码以演示所需的结果。如何使用d3获取它？我尝试了以下方法。
var输入= [{{text“：” inleaf1“，” col“：”红色“}，{” text“：” inleaf2“，” col“：” blue“}，{” text“：” inleaf3“，” col“：” green“}];
var elementwidth = 120;
var elementheight = 50;
var inputstartx = 20;
var inputstarty = 20; //////////// y应该为每个矩形更改
var verticalmargin = 20;
var canvas = d3.select（“。canvas”）;
var inputcontainer = d3.select（“＃input-container”）;
var inputleaf = inputcontainer
.data（输入）
.enter（）。append（“ rect”）
.attr（“ class”，“ input-leaf”）
.attr（“ width”，elementwidth）
.attr（“ height”，elementheight）
.attr（“ x”，inputstartx）
.attr（“ y”，function（d，i）{
返回Number（inputstarty）+（elementheight * i）+垂直边距;
}）
.attr（“ stroke”，function（d）{
返回d.col;
}）;