Я создаю генеалогическое дерево, используя D3.tree и D3.hierarchy. Я знаю, что для каждого дочернего узла лучше всего иметь только 1 родительский узел, но я чувствую, что это возможно с D3, я просто не знаю как.
Это мой текущий пример Я извлекаю данные из family.json
. Я могу рефакторировать данные в любом случае, но не знаю, как.
family.json
{
"data": {
"id": "Adam"
},
"children": [
{
"data": {
"id": "Wayne"
},
"children": [
{
"data": {
"id": "Kenneth"
},
"children": [
{
"data": {
"id": "Arthur"
},
"children": [
{
"data": {
"id": "Ira"
},
...
index.js
json('family.json')
.then(data => {
const root = hierarchy(data);
const links = treeLayout(root).links()
const linkPathGenerator = linkHorizontal()
.x(d => d.y)
.y(d => d.x)
g.selectAll('path').data(links)
.enter().append('path')
// d is a path string based on each one of our links
.attr('d', linkPathGenerator)
g.selectAll('text').data(root.descendants())
.enter().append('text')
.attr('x', d => d.y)
.attr('y', d => d.x)
.attr('dy', '0.32em')
.attr('text-anchor', d => d.children ? 'middle' : 'start')
.text(d => d.data.data.id);