2015-11-25 3 views
0

Я хочу создать файл .json со свободными узлами, т. Е. Ни один дочерний родитель не связан с ним. Предположим, у меня есть дерево с узлами взаимосвязанными дается .json файл Tree with no free nodesДерево без родителя и без родителя с использованием d3

{ 

"name": "Max", 
"value" : 100, 
"children": [ 
{ 
    "name": "Sylvia", 
    "value" : 75, 
    "children":[ 
    {"name": "Craig", "value" : 25}, 
    {"name": "Robin", "value" : 25}, 
    {"name": "Anna", "value" : 25} 
    ] 
}, 
{ 
"name": "David", 
"value" : 75, 
"children": [ 
{"name": "Jeff", "value" : 25}, 
{"name": "Buffy", "value" : 25} 
] 
}, 
{ 
"name": "Mr X", 
"value" : 75 
} 
    ] 
} 

Я хочу что-то вроде этого

Tree with free node

Как я могу обновить файл .json, чтобы получить вышеуказанную дерево с свободный узел с использованием D3.js?

Большое вам спасибо.

ответ

1

Рабочий пример: here, и я думаю, что код аналогичен.

Я добавляю корневой узел с тегом "hidden": true, а узлы Brad и Max находятся на одном уровне.

{ 
    "name": "", 
    "hidden": true, 
    "children": [{ 
    "name": "Brad", 
    "value": 100 
    }, { 
    "name": "Max", 
    "value": 100, 
    "children": [{ 
     "name": "Sylvia", 
     "value": 75, 
     "children": [{ 
     "name": "Craig", 
     "value": 25 
     }, { 
     "name": "Robin", 
     "value": 25 
     }, { 
     "name": "Anna", 
     "value": 25 
     }] 
    }, { 
     "name": "David", 
     "value": 75, 
     "children": [{ 
     "name": "Jeff", 
     "value": 25 
     }, { 
     "name": "Buffy", 
     "value": 25 
     }] 
    }, { 
     "name": "Mr X", 
     "value": 75 
    }] 
    }] 
} 

для шкура корневого узла:

nodeUpdate.select("circle") 
.attr("r", 6) 
.style("fill", function(d) { 
    return d._children ? "lightsteelblue" : "#fff"; 
}).attr("class", function(d) { 
    return d.hidden ? "hidden" : ""; 
}); 

и диагоналей не были созданы:

// Transition links to their new position. 
link.transition() 
.duration(duration) 
.attr("d", function(d) { 
    return "hidden" in d.source ? null : diagonal(d); 
});