1

How do I show edge properties in Jsnetworkx?

I would like to be able to change the edge color and the end of the arrow style (some edges to be arrows and some T's. (Something like: http://upload.wikimedia.org/wikipedia/commons/d/dc/DG_Network_in_Hybrid_Rice.png)

I am trying to adapt one of the examples:

http://jsfiddle.net/3J3k4/

var G = jsnx.DiGraph();

G.add_nodes_from([1,2,3,4,5,[9,{color: '#008A00'}]], {color: '#0064C7'});
G.add_cycle([1,2,3,4,5]);
G.add_edges_from([[1,9,{color: '#008A00'}], [9,1]]);

jsnx.draw(G, {
    element: '#canvas', 
    with_labels: true, 
    node_style: {
        fill: function(d) { 
            return d.data.color; 
        }
    }, 
   label_style: {fill: 'white' },
   edge_style: {
       fill: 'red'
   }
});
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
user27815
  • 4,767
  • 14
  • 28

1 Answers1

3

@user27815, To add edge_style property, I have used a function. The code snippet is given below

var G = jsnx.DiGraph(); 
G.add_nodes_from([1,2,3,4,5,[9,{color: '#008A00'}]], {color: '#0064C7'});
G.add_cycle([1,2,3,4,5]);
G.add_edges_from([[1,9,{color: '#008A00'}], [9,1]]); 
jsnx.draw(G, {
  element: '#canvas', 
  with_labels: true, 
  node_style: {
    fill: function(d) { 
        return d.data.color; 
    }
  }, 
  label_style: {fill: 'white' },
  edge_style: { 
    'stroke': function(d) {
            return d.data.color|| '#AAA';
          }, 
    'stroke-width': 2
  }
});

You can refer to this JSFIDDLE.

Rinku
  • 1,078
  • 6
  • 11