我在d3中制作了一个树形图，引用了这两篇文章：
我正在测试使用这样的简单数据：
country, numbers
US, 100
UK, 50
Germany, 30
France, 20
我已设法渲染树形图，但每个矩形的大小看起来非常相似。
我想制作每个尺寸的矩形来表示它的价值。例如，美国的矩形是最大的，而英国的矩形是50的最大值。
你能告诉我怎么解决吗？
这是我的代码：
<!doctype html>
<html>
<meta charset = "utf-8">
<head>
<style>
.rect {
fill: cadetblue;
opacity: 0.3;
stroke: white;
}
</style>
</head>
<body>
<svg width="900" height="600">
<g></g>
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.csv("practice_numberOnly.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.country = d.country;
d.numbers = +d.numbers;
})
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(d) { return d3.sum(data, function(d) { return d.numbers; }); });
var treemapLayout = d3.treemap()
.size([700, 500])
.paddingOuter(10);
var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value ; });
treemapLayout(root);
d3.select('svg g')
.selectAll('rect')
.data(root.descendants())
.enter()
.append('rect')
.attr("class", "rect")
.attr('x', function(d) { return d.x0; })
.attr('y', function(d) { return d.y0; })
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; });
});
</script>
</body>
</html>
如果您记录嵌套数据，您会发现数组中每个项的值相等，因此表示的区域将相等：
console.log(nest.entries(data) // [{"key": "US","value": 200},{"key": "UK","value": 200},{"key": "Germany","value": 200},{"key": "France","value": 200}]
这不是输入数据，但它来自这一行：
.rollup(function(d) { return d3.sum(data, function(d) { return d.numbers; }); });
在这里，我们分配所有数据的numbers的汇总总和，而不是基于密钥，因为我们将d3.sum()传递给整个数据集data。
相反，我们只想对数据共享指定键的值（下面的values）求和，所以我们要使用：
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(values) { return d3.sum(values, function(value) { return value.numbers; }); });
这是结果：
var data = [
{country:"US",numbers:100},
{country:"UK",numbers:50},
{country:"Germany",numbers:30},
{country:"France",numbers:20}
];
data.forEach(function(d) {
d.country = d.country;
d.numbers = +d.numbers;
})
var nest = d3.nest()
.key(function(d) { return d.country; })
.rollup(function(values) { return d3.sum(values, function(value) { return value.numbers; }); });
var treemapLayout = d3.treemap()
.size([700, 500])
.paddingOuter(10);
var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value ; });
treemapLayout(root);
d3.select('g')
.selectAll('rect')
.data(root.descendants())
.enter()
.append('rect')
.attr("class", "rect")
.attr('x', function(d) { return d.x0; })
.attr('y', function(d) { return d.y0; })
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; });.rect {
fill: cadetblue;
opacity: 0.3;
stroke: white;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="900" height="600">
<g></g>
</svg>