d3 treemap 使每个矩形大小代表它的值

Question

我正在参考这两篇文章在 d3 中制作树状图：

迈克·博斯托克： https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2
彼得·库克： https://d3indepth.com/layouts/

我正在使用这样的简单数据进行测试：

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>

Answer 1

如果您记录嵌套数据，您会发现数组中每一项的值都相等，因此表示的面积将相等：

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>

d3 treemap 使每个矩形大小代表它的值

d3 treemap make each rectangle size represent it's value

javascript

hierarchy

treemap

d3.js