як визначити відношення батьків-дітей у D3? - javascript, json, d3.js

У наступному json-файлі id - ідентифікаційний номер, lv - це рівень і pid - батьківський ідентифікаційний номер цього запису. Як я можу побудувати відношення вузла батьків-дітей для малювання розділу в D3.js?

Я вже перетворив файл json на масив за допомогою функцій d3.json та data.map ..

 [
{
"id": 1,
"nam": "Ph",
"lv": 1,
"pid": 0
},
{
"id":2,
"nam":"Pa",
"lv1":2,
"pid":1
},
...
]

Відповіді:

Вам потрібно визначити стосунки батьків та дітей d3.stratify ().

Отже, враховуючи структуру даних, такою має бути ваша функція розшарування:

var stratify = d3.stratify()
.id(function(d) { return d.id; })
.parentId(function(d) { return d.pid; });

Функція досить проста у використанні: in id ви встановлюєте ідентифікатор кожного вузла, а в parentId ви встановлюєте батьківський ідентифікатор кожного вузла (у вашому випадку, id і pid відповідно).

Перевірте цю демонстраційну версію:

var data =  [{"id": 1, "nam": "Ph", "lv": 1, "pid": ""},
{"id":2, "nam":"Pa", "lv1":2, "pid":1},
{"id":3, "nam":"Foo", "lv1":2, "pid":1},
{"id":4, "nam":"Bar", "lv1":3, "pid":2}];

var stratify = d3.stratify()
.id(function(d) { return d.id; })
.parentId(function(d) { return d.pid; });

var root = stratify(data);

console.log(root);

<script src="https://d3js.org/d3.v4.min.js"></script>

PS: кореневий вузол не має батьківського елемента. Отже, видаліть 0 в pid кореневого об'єкта.