来自没有层次结构的数组的d3树形图答案

【问题标题】：d3 treemap from array without hierarchy来自没有层次结构的数组的d3树形图
【发布时间】：2019-07-31 00:51:05
【问题描述】：

我正在尝试创建一个树形图布局，但仅使用一组数值。我的代码看起来像这样（示例来自here）：

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
    .selectAll('rect')
    .data(root.descendants())
    .enter()
    .append('rect')
    .attr('x', d => d.x0)
    .attr('y', d => d.y0)
    .attr('width', d => d.x1 - d.x0)
    .attr('height', d => d.y1 - d.y0)

rect {
  fill: cadetblue;
  opacity: 0.3;
  stroke: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
  <g></g>
</svg>

不使用d3.hierarchy 是否可以做到这一点？或者至少有一种方法可以在我不需要多个级别的地方进行设置？

【问题讨论】：

标签： javascript d3.js layout hierarchy treemap

【解决方案1】：

是的，您可以按照您链接到的页面的Hierarchical Layouts 部分中的示例数据，设置一个仅在根下一级的层次结构。

这是你需要的数据格式：

const data = {
    children:[
        {
            value: 32
        },
        {
            value: 16
        },
        {
            value: 37
        },
        {
            value: 56
        },
    ]
}

或者你可以像这样转换它：

const originalData = [32, 16, 37, 56];

const data = {
    children: originalData.map(item => ({value: item}))
};

这是fiddle。

【讨论】：