CODEWITHSUNDEEP
javascriptjsond3.jstree
uberHasu
uberHasu

Reputation: 101

Tree Layout - Links - Data Formatting

I am working on a project where I want to show how various files within a website interact with each other. I thought that this would be a fairly simple task using D3, but now I am wondering about how my json data is arranged. Here is a sample of my data : 

{
"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"}]
}]
}

My plan was to use the ID's to show links between files and the classes to color code the types of files. When I started looking into d3.layout.tree() I started to realize that the layouts seem to be very dependant on having a specific data model, namely :

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

etc, etc, etc

Am I correct in thinking that the data being passed into d3.layout.tree() has to match that exact format?

Ultimately, I was hoping that I would be able to make each node of my data tree clickable, which would turn that node into the root node of the graph, but maybe that is just not possible?

Any guidance/advice on data formatting and the d3.layout.tree() would be much appreciated.

Upvotes: 1

Views: 174

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

As for your desire to make a selected node the new root of the tree, I unearthed this fiddle that I started putting together sometime ago. It is simple minded and much can be done to improve it but it should provide you with a reasonable start.

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

Upvotes: 1

Related Questions