d3.js：如何根据 children 和 parents 值调整 D3 分区 table 的大小

Question

我正在尝试在 D3 中构建一个基本的冰柱分区树，但我似乎无法让值函数执行我想要的操作。基本上，我希望每个节点的大小根据它的值和它的总和 children。如中所述： d3.js: size of parents = sum of size of children，默认行为根据 children 的总和来调整节点大小。但是，我发现它只查看叶节点，然后根据这些节点调整所有节点的大小。

我有 hard-coded 个值，我希望我的节点大小为 JSON 个值 (totalMass)，它已经计算出当前节点的值，它是 children。结果如下：

抱歉，我不能post一张图片，但我可以描述一下：

What I would like:

Root (12 = 5 + Children (3+4))
    Child1 (3 = 1 + Children (2))
        Leaf (2)
    Child2 (4 = 2 + Children (2))
        Leaf (2)
        
What I get:

Root (4)
    Child1 (2)
        Leaf (2)
    Child2 (2)
        Leaf (2)

感谢您的帮助。因此，我希望所有内容的大小都与根节点的实际值成比例，因此会有一些空白（因为每个节点的值都将高于其 children 的总和）。这也是我实际数据的简化示例，并不是所有的叶节点都不会在同一层上。

有没有办法让值函数像这样工作，或者我是否必须手动调整图表节点的大小？

到目前为止，这是我的代码（在 Typescript 中）：

this.svg = d3.select(this.container).append("svg")
            .attr("width", this.width + this.margin.right + this.margin.left)
            .attr("height", this.height + this.margin.top + this.margin.bottom)
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");          

        this.rectPartition = this.svg.append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
            .classed("rect_partition", true);

        // TODO: filter children such that accounts for leaf children of same category
        this.partition = d3.layout.partition()
            .children((d: ChartNode) => {
                var filteredChildren = [];
                if (d.children) {
                    d.children.forEach(child => {
                        if (this.nodeContainsCategory(child, ProductsCategory)) filteredChildren.push(child);
                    });
                    return filteredChildren;
                }
                else return null;
            })
            .value((d: ChartNode) => d.totalMass)
            .sort((a: ChartNode, b: ChartNode) => {
                //first sort by owner, then sort by short name
                if (a.owner === b.owner) return (a.shortName > b.shortName) ? 1 : -1;
                else return (a.owner > b.owner) ? 1 : -1;
            });

Answer 1

我觉得Zoomable Bubble Chart最符合你的要求。你可以为此使用 d3 包布局。

这是此结构的官方 D3 link.. Click here

希望我的推荐对您有所帮助..

Answer 2

嗯，老实说，我和你有同样的问题。显然有一个 pull request 正在处理这个问题：https://github.com/mbostock/d3/pull/574。还有另一种解决方案，Mike Bostock 本人在线程的评论中使用虚拟节点进行了描述。我仍在努力解决这个问题，但也许如果你看一下可能会帮助你解决这个问题（如果你仍然有这个问题）。

d3.js：如何根据 children 和 parents 值调整 D3 分区 table 的大小

d3.js: How to size D3 partition table based on both children and parents value

javascript

charts

d3.js

partition