ノード数が多い場合にcytoscape.js同心円レイアウトでノードラベルサイズを設定する方法

Question

こんにちは、cytoscape.jsを使用して同心円グラフを表示しようとしています。データには約100のノードが含まれています。 「同心円」を選択したのは、グラフを3つのレイヤー（内側、中央、外側など）で表示したいからです。各ノードには「レベル」という属性があり、1-3に割り当てられています。 問題は、ノードラベルのフォントサイズに問題があります。しかし、私はラベルのサイズを変更する、それは非常に私はほとんどそれを見ることができない限り、大幅にズームしない限り。

var style = [ 
{ 
    selector: "node[type = 'A']", 
    style: { 
     "background-color": "blue", 
     "label": "data(id)", 
     "height": 50, 
     "width": 50, 
     "font-size": "20px" 
    } 
}, 
{ 
    selector: "node[type = 'B']", 
    style: { 
     "background-color": "green", 
     "label": "data(id)", 
     "font-size": "80px", 
     "height": 50, 
     "width": 50 
    } 
}, 
{ 
    selector: "node[type= 'C']", 
    style: { 
     "background-color": "red", 
     "label": "data(id)", 
     "font-size": "30px", 
     "height": 50, 
     "width": 50 
    } 
}, 
{ 
    selector: "edge", 
    style: { 
     "curve-style": "haystack", 
     "haystack-radius": 0, 
     "width": 10, 
     "opacity": 0.5, 
     "line-color": "#a8eae5" 
    } 
} 
]; 

// define concentric option 
var concentricOptions = { 
name: "concentric", 
concentric: function (node) { 
    return 10 - node.data("level"); 
}, 
minNodeSpacing: 1, 
padding: -1 
}; 

私は、フォントサイズ、幅、高さの異なるカップルを試してみました：私は現在、cytoscape.jsスタイルやレイアウトを設定する方法である。ここ example cytoscapejs graph

：ここ は、グラフが現在どのように見えるかですパラメータは、実際には動作していないようです。誰かが私にラベルサイズを増やすのを手伝ってくれるかなと思います。理想的には、ラベルサイズがここの例に似て表示されることを願っています：http://js.cytoscape.org/demos/spread-layout/。しかし、これは別のレイアウトを使用しています（ただし、ノード数も多い） ありがとう！

Answer 1

ノードの間隔が広すぎます。したがって、グラフがビューポートに当てはめられると、ズームアウトされます。

視覚的な結果が得られるまでレイアウトパラメータを調整します。考慮すべき

パラメータ：

• spacingFactor
• minNodeSpacing
• avoidOverlap
• nodeDimensionsIncludeLabels

参考：http://js.cytoscape.org/#layouts/concentric

から

フォントサイズを変更するには、スタイルシート（例： font-size）：http://js.cytoscape.org/#style/labels