在d3中爲每個數據元素添加多個矩形

Question

使用d3，我正在嘗試編寫一個腳本，通過顯示它由各個塊組成的可視化大小的數字。所以數字5將由5個矩形組成。在svg中創建矩形的一般語法如下所示。

var p = d3.select("body").selectAll("p") 
    .data([5, 3, 10]) 
    .enter() 
    .append("rect) 
    ... 

但是，我真正想要的是每個數據元素追加多個矩形的東西。

var p = d3.select("body").selectAll("p") 
    .data([5, 3, 10]) 
    .enter() 
    .do(CreatedRectangles(d)) 

任何人都知道如何輕鬆做到這一點？

Answer 1

你可以使用這個nested selection和d3.range()：

d3.select("body") 
    .selectAll("p") 
    .data([5,3,10]) 
    .enter() 
    .append("p") 
    .selectAll("p") 
    .data(function(d) { return d3.range(d); }) 
    .enter() 
    .append("p") 
    .html(String); 

演示here。

您也可以使用您的.do()，除了它被稱爲.each()。 CreateRectangle()看起來像這樣。

function CreateRectangle(d) { 
    d3.select(this).selectAll("p").data(d3.range(d)).enter().append("p").html(String); 
} 

它與SVG和rect元素的工作方式類似。