Javascript 使用D3.js创建一个简单的树状图

我有一些csv数据，我计算每个项目的发生次数，得到一个整数数组，表示每个不同项目的计数。我想使用D3.js v5创建一个树形图，其中每个矩形的大小与这些数字成比例。我所看到的树状图上的所有资源都使用层次结构和树来创建它。是否可以仅使用表示区域的数字创建一个非常基本的树状图

像这样： 以下是一个示例：

const data=[30020015010050]。排序（（a，b）=>b-a）；
const sum=data.reduce（（s，i）=>s+i，0）；
const svg=d3.select（'svg'）；
const width=parseInt（svg.attr（'width'））；
const height=parseInt（svg.attr（'height'））；
常数单位=宽度*高度/总和；
常量边界={top:0，left:0，right:width，bottom:height}；
让权重左=和；
设x，y，w，h；
data.forEach（d=>{
const hSpace=bounds.right-bounds.left；
const vSpace=bounds.bottom-bounds.top；
施工面积=d/单位；
x=边界。左；
y=边界。顶部；
如果（hSpace>vSpace）{
w=（d/左权重）*hSpace；
h=vSpace；
bounds.left=x+w；
}
否则{
w=hSpace；
h=（d/左权重）*vSpace；
bounds.top=y+h；
}
加权左-=d；
append（'rect'）
.attr（'x'，x）
.attr（'y'，y）
.attr（'宽度'，w）
.attr（'高度'，h）
.style（'填充'，'蓝色'）
.style（'笔划'，'白色'）
.style（'笔划宽度'，3）
append（'text'）
.案文（d）
.attr（'x'，x+w/2）
.attr（'y'，y+h/2）
.attr（'text-anchor'，'middle'）
.attr（'路线基线'，'中间'）
.style（'填充'，'白色'）
});

请发布所需结果的图片，这可能会有所帮助…post使用示例图像进行编辑