基于内容的Cytoscape.js风格节点
问题描述:
我想为我的根节点着色与屏幕上其余节点不同的颜色,我已经做了一些预先工作来确定根节点的值,并且已经它随时可用于一个变量。然而,在试图设计风格的图时,什么都没有发生,并且通过它很难调试。基于内容的Cytoscape.js风格节点
例如:
nodes: [{id = 1}, {id=2}]
var startingNode = 1; //root node
$('#cy').cytoscape({
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'background-color': 'red',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
},
{
selector: "node[content = 'startingNode']",
css: {
'content': 'data(id)',
'background-color': 'purple',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
}]
// more info for cytoscape rendering omitted
});
任何投入将是有益的!
感谢, 保罗G.
答
除非content
是在节点的data
,这是行不通的。如果您有节点的ID(例如foo
),则可以使用#foo
或[id = 'foo']
作为选择器。
参照上面的例子: '选择: '节点[ID = startingNode]'' 不起作用,但是: '选择: '节点[ID = “1”]''呢,是问题变量的范围?如果有的话,对方法有什么建议? – 2014-10-01 16:08:22
如果没有连接或ES6中可用的字符串模板,则无法使用JS引用字符串中的变量。这可能会帮助你:http://www.quirksmode.org/js/strings.html – maxkfranz 2014-10-01 16:47:17
真棒,完全忘了所有。 'selector:'node [id =''+ startingNode +'“]'' 工作完美,谢谢您的协助! – 2014-10-01 17:40:02