小编Lea*_*gD3的帖子

我正在尝试创建一个描述预算数据的树形图。

预期：树形图中不应有任何间隙；描述每个节点的所有矩形都应该像乐高积木一样适合 SVG 内。

实际：我的树状图的矩形在我的 SVG 中没有很好地排列；见下图：

目前，我的数据集很浅，大部分是我编写的虚拟数据。CSV 文件的结构为：

这些是代码中的相关步骤：

第 1 步： 加载 CSV 文件后，我使用以下命令将其转换为层次结构d3.stratify()：

`let dataStratified = d3
.stratify()
.id(function (d) {
  return d.Child;
})
.parentId(function (d) {
  return d.Parent;
})(results);`

第 2 步：然后我传递到分层布局d3.treemap()：

let myTreemap = (data) =>
d3.treemap().size([width, height]).padding(1).round(true)(
  d3
    .hierarchy(data)
    .sum((d) => d.data["Rs,millions"])
    .sort((a, b) => b.data["Rs,millions"] - a.data["Rs,millions"])
);

  const root = myTreemap(dataStratified);

第 3 步：使用这个Observable 笔记本作为指导，我继续构建树形图的叶子：

 const leaf = g
.selectAll("g.leaf") …