来自没有层次结构的数组的 d3 树图
d3 treemap from array without hierarchy
我正在尝试创建一个树状图布局,但只有一个数值数组。我的代码看起来像这样(示例来自 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
可以做到吗?或者至少有一种方法可以在我不需要多个级别的情况下进行设置?
是的,您可以按照您链接到的页面 Hierarchical Layouts 部分中的示例数据,设置根以下仅 1 级的层次结构。
这是您需要的数据格式:
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。
我正在尝试创建一个树状图布局,但只有一个数值数组。我的代码看起来像这样(示例来自 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
可以做到吗?或者至少有一种方法可以在我不需要多个级别的情况下进行设置?
是的,您可以按照您链接到的页面 Hierarchical Layouts 部分中的示例数据,设置根以下仅 1 级的层次结构。
这是您需要的数据格式:
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。