cytoscape 节点的自定义样式答案

【问题标题】：Custom styling for cytoscape nodescytoscape 节点的自定义样式
【发布时间】：2018-04-26 06:07:51
【问题描述】：

我想根据某些条件向我的 cytoscape 图中的节点添加一些自定义样式。这可能吗？具体来说，我想添加多个带有内边框的边框作为百分比圆。我愿意使用预定义的百分比。如下所示：

这可能吗？如果有人可以建议解决方法，那就太好了。我可以使用 cystoscape.js 中的边框属性获得单个边框。在普通的 css3 中，这可以使用伪元素来完成，但不确定它在 cytoscape.js 中是如何工作的

【问题讨论】：

标签： cytoscape.js

【解决方案1】：

Cytoscape.js 不支持伪元素。

如果您想要自定义图形，您可以使用背景图片。如果您希望它们动态生成，您可以使用返回图像 URI 的函数样式属性值。您可以使用画布 API 创建图像。

饼图样式类似于您图片中的紫色部分，但您有一个空心部分——因此最好生成图片。

【讨论】：

【解决方案2】：

当你创建一个节点时，你可以添加额外的信息（API很棒）

NEWnode.push({
            group: "nodes",
            data: {typeCss: 'css1', etc: 'etc'},
            // group: css1,
            // classes: css1
        });

// add node
cy.add(NEWnode);

并获取/解析节点信息

cy.nodes().each(function(i) {

}

【讨论】：