cytoscape.js - cytoscape.js同心布局节点数量较多时如何设置节点标签大小

Question

你好，我正在尝试使用 cytoscape.js 显示同心图。该数据包含大约 100 个节点。我选择“同心”的原因是因为我想以 3 层(例如内层、中层、外层)显示我的图表。并且每个节点都有一个名为“level”的属性，该属性被分配为1-3。 我遇到的问题是节点标签的字体大小。然而，我将标签大小更改为，它仍然很大，除非大幅放大，否则我几乎看不到它。 该图目前的样子如下: example cytoscapejs graph

以下是我目前设置 cytoscape.js 样式和布局的方法:

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

我尝试了几个不同的高度、宽度、字体大小参数，但似乎没有一个真正有效。想知道是否有人可以帮助我增加标签尺寸。理想情况下，我希望标签尺寸的显示方式与此处的示例类似:http://js.cytoscape.org/demos/spread-layout/ 。然而，这个使用了不同的布局。(但它也包含大量节点) 谢谢!

Answer 1

您的节点间隔太大。因此，当图表适合视口(viewport)时，您会缩小很多。

调整布局参数，直到获得所需的视觉结果。

要考虑的参数:

• 间距因子
• 最小节点间距
• 避免重叠
• 节点维度包含标签

引用号:http://js.cytoscape.org/#layouts/concentric

--

要更改字体大小，请使用样式表(即font-size):http://js.cytoscape.org/#style/labels