Карта дерева d3 из массива без иерархии - PullRequest
Новая
       34

Карта дерева d3 из массива без иерархии

1 голос
/ 09 марта 2019

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

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? Или хотя бы способ установить это, где мне не нужно несколько уровней?

1 Ответ

1 голос
/ 09 марта 2019

Да, вы можете настроить иерархию, которая имеет только 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}))
};

Вот скрипка .

...