Tree Layout - Links - Форматирование данных

Question

Я работаю над проектом, где я хочу показать, как различные файлы на веб-сайте взаимодействуют друг с другом. Я думал, что это будет довольно простая задача с использованием D3, но теперь мне интересно, как устроены мои json-данные. Вот пример моих данных:

{ 
"pages" : [{ 
    "ID" : "1", 
    "name" : "config.xml", 
    "class" : "dvs", 
    "path" : "/config.xml", 
    "children" : [{"dvs":"2","dvs":"3","sites":"4","sites":"5"}] 
},{ 
    "ID" : "2", 
    "name" : "site-pages.xml", 
    "class" : "dvs", 
    "path" : "/pages/site-pages.xml", 
    "children" : [{"dvs":"1"}] 
},{ 
    "ID" : "3", 
    "name" : "customscripts.vm", 
    "class" : "sites", 
    "path" : "components/customscripts.vm", 
    "children" : [{"dvs":"1","sites":"4","sites":"5"}] 
},{ 
    "ID" : "4", 
    "name" : "badge.vm", 
    "class" : "sites", 
    "path" : "components/badge.vm", 
    "children" : [{"dvs":"1","sites":"3"}] 
},{ 
    "ID" : "5", 
    "name" : "price.vm", 
    "class" : "sites", 
    "path" : "components/price.vm", 
    "children" : [{"dvs":"1","sites":"3"}] 
}] 
} 

Мой план состоял в том, чтобы использовать идентификаторы, чтобы показать связь между файлами и классами с цветовым кодом типов файлов. Когда я начал искать в d3.layout.tree() я начал понимать, что макеты, кажется, очень зависит от наличия конкретной модели данных, а именно:

{ "name" : "foo", 
    "children" : [{ 
    "name" : "bar", 
    "children" : [{ 
    }] 
    }] 
} 

и т.д., и т.д., и т.д.

Am Я правильно понял, что данные, передаваемые в d3.layout.tree(), должны соответствовать этому точному формату?

В конечном итоге я надеялся, что смогу сделать каждый узел моего дерева данных кликабельным, что превратит этот узел в корневой узел графика, но, возможно, это просто невозможно?

Любые рекомендации/рекомендации по форматированию данных и d3.layout.tree() будут высоко оценены.

Answer 1

Что касается вашего желания сделать выбранный узел новым корнем дерева, я раскопал этот fiddle, который я начал собирать когда-то раньше. Это просто, и многое можно сделать, чтобы улучшить его, но оно должно обеспечить вам разумное начало.

function click(d) {  
    update(d.depth == 0 ? root : d) 
}