cytoscape.js 让标签与线错开

按照官方说明,在 stylesheet 中直接使用

1
2
3
edge{
label: data(name);
}

可以让连边的 label 正常显示:

-w806

但是,文字覆盖在连边上效果很不好,因此有时候会使用 outline 等方式,让文本更加突出。而根据需求,现在需要让 label 文本和连边错开(即文本在边的上边而不是重合),使用官方提供的 margin 等接口,都会在连边不是水平的时候导致文本的错位:

-w575

-w220

上面两个图片是

1
2
3
edge{
text-margin-y: 10;
}

的效果。

解决方案

1
graph.cy.style().selector('edge').style({'label':  label => label.data().name + "\n\n\u200b"}).update()

直接让一行标签变成三行标签,这样就刚好和连边错开了。其中 \u200b 是空白的字符,在图中不会显示,拿来做占位符恰好合适。效果如下:

-w310