2014-07-07 117 views
1

如何顯示Jsnetworkx中的邊緣屬性?如何更改jsnetworkx邊緣顏色

我希望能夠改變邊緣顏色和箭頭樣式結束(一些邊是箭頭和一些T的(喜歡的東西:http://upload.wikimedia.org/wikipedia/commons/d/dc/DG_Network_in_Hybrid_Rice.png

我試圖適應的一個例子:

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' 
    } 
}); 

回答

3

@ user27815,要添加edge_style屬性中,我使用的功能下面

代碼段中給出。
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 
    } 
}); 

您可以參考JSFIDDLE

0

使用下面的代碼的方法jsnx.draw(G, {內:

edgeStyle: { 
    'stroke-width': 15, 
    fill: '#999' 
},