Почему мой d3.treemap () возвращает визуализацию данных с большими пробелами? - PullRequest
Новая
       70

Почему мой d3.treemap () возвращает визуализацию данных с большими пробелами?

0 голосов
/ 09 июля 2020

Я пытаюсь создать древовидную карту данных бюджета.

Ожидается : В древовидной карте НЕ должно быть пробелов; все прямоугольники, изображающие каждый узел, должны соответствовать как legos внутри SVG.

Actual : Прямоугольники моей древовидной карты плохо выстраиваются в моем SVG; см. изображение ниже:

enter image description here

For now, my dataset is quite shallow and is mostly dummy data that I made up. The structure of CSV-файл is:

enter image description here

These are the relevant steps from code:

Step 1: After loading in the CSV file, I converted it into hierarchy using d3.stratify():

`let dataStratified = d3
.stratify()
.id(function (d) {
  return d.Child;
})
.parentId(function (d) {
  return d.Parent;
})(results);`

Step 2: Then I passed to a hierarchical layout, d3.treemap():

let myTreemap = (data) =>
d3.treemap().size([width, height]).padding(1).round(true)(
  d3
    .hierarchy(data)
    .sum((d) => d.data["Rs,millions"])
    .sort((a, b) => b.data["Rs,millions"] - a.data["Rs,millions"])
);

  const root = myTreemap(dataStratified);

Step 3: Using this Наблюдаемый блокнот в качестве руководства я приступил к созданию листьев карты дерева: 

 const leaf = g
.selectAll("g.leaf")
// root.leaves() returns all of the leaf nodes
.data(root.leaves())
.enter()
.append("g")
.attr("class", "leaf")
// position each group at the top left corner of the rect
.attr("transform", (d) => `translate(${d.x0},${d.y0})`)
.style("font-size", 10);

Шаг 4 : И добавил его в созданный мной SVG: 

// Now we append the rects.


 leaf
    .append("rect")
    .attr("id", (d) => d.data.id)
    .attr("fill", (d) => {
      while (d.depth > 1) d = d.parent;
      return color(d.data.data.Child);
    })
    .attr("opacity", 0.7)
    // the width is the right edge position - the left edge position
    .attr("width", (d) => d.x1 - d.x0)
    // same for height, but bottom - top
    .attr("height", (d) => d.y1 - d.y0)
    // make corners rounded
    .attr("rx", 3)
    .attr("ry", 3);

Остальная часть кода в основном стилизована и размещение метки, поэтому я не думаю, что это имеет отношение к моему вопросу здесь, но его можно просмотреть здесь: Github или CodeSandbox .

1 Ответ

1 голос
/ 21 июля 2020

Неправильный размер прямоугольников обусловлен общим значением древовидной карты, вы, по сути, снова складываете итоги на родительском узле (поскольку он находится в столбце CSV).

Суммировать следует только в том случае, если это листовой узел (то есть, если объект не имеет потомков). Короче говоря, если вы проверяете наличие дочерних элементов в функции hierarchy.sum и только суммируете, если дочерних элементов нет, тогда он должен правильно рассчитать итоги 

let dataHierarchy = d3
    .hierarchy(dataStratified)
    .sum(d => (d.children ? 0 : d.data["Rs,millions"]))
    .sort((a, b) => b.data["Rs,millions"] - a.data["Rs,millions"]);
...