Question

使用示例http://bl.ocks.org/ganeshv/raw/6a8e9ada3ab7f2d88022/dd9e5ec5489b00e7509378c37bc797309f3c2aa3/（使用v3）和d3的最新版本（即v5），我无法获取树形图。

该示例使用treemap.nodes，但是在v5中不再是该功能，我无法找到一种替代方法来获取树图以使用v5为节点生成x / y位置。

这是一段代码，其中包含相关功能：

function layout(d) {
if (d._children) {
  treemap.nodes({_children: d._children});
  d._children.forEach(function(c) {
    c.x = d.x + c.x * d.dx;
    c.y = d.y + c.y * d.dy;
    c.dx *= d.dx;
    c.dy *= d.dy;
    c.parent = d;
    layout(c);
  });
}

}

Answer 1

https://observablehq.com/@albutko/cascading-zoomable-treemap似乎可以使用d3的第5版来完成您想做的事情。

Answer 2

我想引起您对D3.js的changelog的关注，该指南可作为迁移指南。当您不得不从v3迁移到v5时，这种情况可能会非常有用。

这是d3.treemap的详细文档。

看看original code，您将不得不做相当多的更改，而不仅仅是上面粘贴的代码。

您可能应该开始这样的事情：

const treemap = d3.treemap()
    .size([width, height])
    .padding(2);

const nodes = treemap(root
    .sum(d => d.value)
    .sort((a, b) => a.value - b.value))
    .descendants();

如here所述：

在调用层次结构之前，必须先调用node.sum或node.count 需要node.value的布局，例如d3.treemap。

d3 v5中的树图不再支持节点

2 个答案: