這是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;
}）;
2021-01-08 08:12:43
你只是搞砸了-> selectAll（）
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.selectAll（'。rect'）
.data（輸入）
.enter（）。append（“ rect”）
.attr（“ class”，“ input-leaf”）
.attr（“ fill”，“ none”）
.attr（“ width”，elementwidth）
.attr（“ height”，elementheight）
.attr（“ x”，inputstartx）
.attr（“ y”，function（d，i）{
返回elementheight *（2 * i + 1）;
}）
.attr（“ stroke”，function（d）{
返回d.col;
}）;