javascript - "Leaf-justify"D3 TreeMap ？

Question

我需要做什么来渲染 TreeMap ，使节点向图的叶侧对齐？

我想采用通常看起来像的任意 TreeMap :

并让它类似于:

Answer 1

一种方法是发现树的深度并设置 depth每个没有该值的子节点的节点的属性。

假设你的树数据如下:

var data = [
    {
        "name": "Top Level",
        "parent": "null",
        "children": [
            {
                "name": "Level 2: A",
                "parent": "Top Level",
                "children": [ ...

并且您使用以下方法创建了一棵树:

var tree = d3.layout.tree();

您可以获得depth通过在每个节点中搜索 depth 的最大值来搜索树:

var treeDepth = d3.max(tree(data[0]), function(d) { return d.depth; });

一旦你有了它，你就可以在每次重新计算树布局时重置它:

tree.nodes(data[0]).forEach(function(d) {
    var depthSize = 50;
    if (!d.children) { // this node has no children
        d.depth = treeDepth; // set depth to depth of tree
    }
    d.y = d.depth * depthSize; // recalculate y
});

这适用于按照您的示例(从左到右)布置的树木。对于自上而下的布局，您必须更改 d.x相反。

这是一个 JSFiddle 的工作解决方案改编自 this example 。