Multilevel Hierarchical Edge Bundling

问题

I want to implement multilevel hierarchical edge bundling. By that I means I want to inculcate the behavior of radial tree like hierarchy and edge bundling like in Hierarchical Edge Bundling.

The sample visualization is Radial Hierarchical bundling

I know I need to use two d3.js layout for that. Also I need to change my json dataset accordingly.

My sample dataset is only for normal d3.js HEB

[
{"name": "A", "imports": ["A1", "A2", "A3"]},                    
{"name": "B", "imports": ["B1", "B2", "B3"]},                   
{"name": "C", "imports": ["C1", "C2", "C3"]},                   
{"name": "Employees", "imports": ["Emp1", "Emp2", "Emp3"]},        
{"name": "A1", "imports": ["Emp1", "Emp2"]},   
{"name": "A2", "imports": ["Emp3", "Emp2"]}, 
{"name": "A3", "imports": ["Emp1", "Emp3"]},
{"name": "C1", "imports": ["Emp1", "Emp3"]},
{"name": "C2", "imports": ["Emp2", "Emp3"]},
{"name": "C3", "imports": ["Emp1", "Emp2"]},                             
{"name": "B1", "imports": ["Emp1", "Emp3"]},
{"name": "B2", "imports": ["Emp2", "Emp3"]},                                               
{"name": "B3", "imports": ["Emp1", "Emp2"]},                        
{"name": "Emp1", "imports": ["A1","A3","B1","B3","C1","C3"]},   
{"name": "Emp3", "imports": ["A3","A2","B2","B1","C2","C1"]},
{"name": "Emp2", "imports": ["A1","A2","B2","B3","C2","C3"]}
]

However the relation I want to show is:

A, B and C at highest level

A is parent of A1,A2,A3

B is parent of B1,B2,B3,

A is parent of A1,A2,A3

C is parent of C1,C2,C3,

Thus, A1,A2,A3,B1,B2,B3,C1,C2, C3 are at second level

Then, I want to show the relation of Emp1, Emp2, and Emp3 with A1-C3 through edge bundling as shown in above dataset.

I hope I am clear on that. So, please tell me how can I show this behavior or relation and what appropriate changes in the dataset is needed.

回答1:

An approximate solution to your question is to save the following adapted version of your JSON example in a text file (e.g. "test.json"):

[
{"name": "A.A1", "imports": ["Emp.Emp1", "Emp.Emp2"]},   
{"name": "A.A2", "imports": ["Emp.Emp3", "Emp.Emp2"]}, 
{"name": "A.A3", "imports": ["Emp.Emp1", "Emp.Emp3"]},
{"name": "C.C1", "imports": ["Emp.Emp1", "Emp.Emp3"]},
{"name": "C.C2", "imports": ["Emp.Emp2", "Emp.Emp3"]},
{"name": "C.C3", "imports": ["Emp.Emp1", "Emp.Emp2"]},                             
{"name": "B.B1", "imports": ["Emp.Emp1", "Emp.Emp3"]},
{"name": "B.B2", "imports": ["Emp.Emp2", "Emp.Emp3"]},                                               
{"name": "B.B3", "imports": ["Emp.Emp1", "Emp.Emp2"]},                        
{"name": "Emp.Emp1", "imports": ["A.A1","A.A3","B.B1","B.B3","C.C1","C.C3"]},   
{"name": "Emp.Emp3", "imports": ["A.A3","A.A2","B.B2","B.B1","C.C2","C.C1"]},
{"name": "Emp.Emp2", "imports": ["A.A1","A.A2","B.B2","B.B3","C.C2","C.C3"]}
]

Then use R to generate an D3 edge bundle plot using the edgebundleR package:

install.packages("devtools")
devtools::install_github("garthtarr/edgebundleR")
setwd("path/to/dir/with/file")
edgebundle("test.json")

Here's a screenshot of the result:

来源：https://stackoverflow.com/questions/30653093/multilevel-hierarchical-edge-bundling

标签

javascript

d3.js

hierarchical

bundle-layout