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: