jit graph Forcedirected add label on edge
Jun 21, 2011
jit graph(JavaScript InfoVis Toolkit ) is an amazing javascript graph library. Here is the demo i use , the forcedirected graph. Well I just get stuck on how to add the label on the edges. I 've googled for a lot , but lots of doc are out of sync. So i just tweeted a little bit, and found the following solution.
1.modify the json data ,to add a relatedOn key/value
var json = [
{
"adjacencies": [
{
"nodeTo": "sky",
"nodeFrom": "earth",
"data": {
"$color":"#dd99dd",
"relatedOn": "from sky to earth"
}
},
{
"nodeTo": "ocean",
"nodeFrom": "earth",
"data": {
"relatedOn": "from ocean to earth"
}
}],
"id": "earth",
"name": "earth"
}
]
2.implement a customized edge type
// init ForceDirected
var fd = new $jit.ForceDirected({
Edge: {
overridable: true,
color: '#23A4FF',
type: 'label-arrow-line'
},
3.specify the edge type to customized type in ForceDirected controller Edge configuration.
var fd = new $jit.ForceDirected({
Edge: {
overridable: true,
color: '#23A4FF',
type: 'label-arrow-line'
},
Label: {...}
});
There you go. Following is the result: