В древовидной карте d3 каждый размер прямоугольника соответствует его значению - PullRequest
Новая
       40

В древовидной карте d3 каждый размер прямоугольника соответствует его значению

0 голосов
/ 30 августа 2018

Я делаю древовидную карту в 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>

1 Ответ

0 голосов
/ 30 августа 2018

Если вы зарегистрируете свои вложенные данные, вы обнаружите, что значение каждого элемента в массиве равно, следовательно, представленная область будет равна: 

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>
...