d3で事前定義された開始位置とマージンレベルで長方形のスタックを描画する方法

これのJSFiddle。
開始位置と垂直マージンが定義されているときにsvg長方形のきちんとしたスタックが必要であり、配列からのデータを使用します。
JSfiddleでは、出力コンテナーを手動でコーディングして、目的の結果を示します。 d3を使用して取得するにはどうすればよいですか？私は以下を試しました。
var input = [{"text"： "inleaf1"、 "col"： "red"}、{"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）+ verticalmarginを返します。
}）
.attr（ "stroke"、function（d）{
d.colを返します。
}）;