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

你的节点间隔太多了。因此，当图形适合视口时，您会被缩小很多。

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

要考虑的参数：

spacingFactor
minNodeSpacing
avoidOverlap
nodeDimensionsIncludeLabels

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

-

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

当存在大量节点时，如何在cytoscape.js同心布局中设置节点标签大小

1 个答案: