cytoscape 节点的自定义样式
Custom styling for cytoscape nodes
我想根据某些条件向我的 cytoscape 图中的节点添加一些自定义样式。这可能吗?具体来说,我想添加多个带有内边框的边框作为百分比圆。我愿意使用预定义的百分比。像下面这样的东西:
这可能吗?如果有人可以建议解决方法,那就太好了。
我可以使用 cystoscape.js 中的边框属性获得单个边框。在普通 css3 中,这可以使用伪元素来完成,但不确定在 cytoscape.js
中如何工作
Cytoscape.js不支持伪元素
如果您想要自定义图形,可以使用背景图片。如果你想让它们动态生成,你可以使用函数样式 属性 值 returns 图像 URI。您可以使用 canvas API 创建图像。
饼图样式类似于您图像中的紫色部分,但您有一个空心部分 -- 因此最好生成图像。
创建节点时,可以添加额外的信息(API 很棒)
NEWnode.push({
group: "nodes",
data: {typeCss: 'css1', etc: 'etc'},
// group: css1,
// classes: css1
});
// add node
cy.add(NEWnode);
和get/parse节点信息
cy.nodes().each(function(i) {
}
我想根据某些条件向我的 cytoscape 图中的节点添加一些自定义样式。这可能吗?具体来说,我想添加多个带有内边框的边框作为百分比圆。我愿意使用预定义的百分比。像下面这样的东西:
这可能吗?如果有人可以建议解决方法,那就太好了。 我可以使用 cystoscape.js 中的边框属性获得单个边框。在普通 css3 中,这可以使用伪元素来完成,但不确定在 cytoscape.js
中如何工作Cytoscape.js不支持伪元素
如果您想要自定义图形,可以使用背景图片。如果你想让它们动态生成,你可以使用函数样式 属性 值 returns 图像 URI。您可以使用 canvas API 创建图像。
饼图样式类似于您图像中的紫色部分,但您有一个空心部分 -- 因此最好生成图像。
创建节点时,可以添加额外的信息(API 很棒)
NEWnode.push({
group: "nodes",
data: {typeCss: 'css1', etc: 'etc'},
// group: css1,
// classes: css1
});
// add node
cy.add(NEWnode);
和get/parse节点信息
cy.nodes().each(function(i) {
}