d3 v5中的树图不再支持节点 [英] Treemap in d3 v5 doesn't support nodes anymore

问题描述

使用此示例 http://bl.ocks.org/ganeshv/raw/6a8e9ada3ab7f2d88022/dd9e5ec5489b00e7509378c37bc797309f3c2aa3/(使用v3)与最新版本的d3为v5，我无法获取树形图.

Using this example http://bl.ocks.org/ganeshv/raw/6a8e9ada3ab7f2d88022/dd9e5ec5489b00e7509378c37bc797309f3c2aa3/ (uses v3) with the latest version of d3 which is v5, I am unable to get a treemap.

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

The example uses treemap.nodes, but that is no longer a function in v5 and I'm not able to find an alternative way to get the treemap to generate the x/y positions for the nodes using v5.

这是一段代码，其中包含有问题的函数:

Here is a section of code that contains the function in question:

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);
  });
}

}

推荐答案

我想引起您对D3.js的

I'd like to bring your attention to D3.js's changelog, which serves as a migration guide. It'll probably be very useful when it comes to such situations when you have to migrate from v3 to v5.

这是 d3.treemap .

查看原始代码，您将需要进行相当多的更改，而不仅仅是您上面粘贴的代码.

Looking at the original code, you will have to make quite a fair bit of changes, and not just the code you have pasted above.

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

You'll probably should start something like this:

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();

如此处所述:

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

You must call node.sum or node.count before invoking a hierarchical layout that requires node.value, such as d3.treemap.

这篇关于d3 v5中的树图不再支持节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！