我正在使用Cytoscape 2.5.0。
这是基本的工作代码:
Private Sub UserForm_Initialize()
Dim cRng as Range
Dim cLoc As Range
Dim ws As Worksheet
Dim n as Integer
Set ws = Worksheets("MFG_DATA")
n = ws.Range("A" & ws.Range("A" & Rows.Count).End(xlUp)).Row
Set cRng = ws.Range("A2:A" & n)
ActiveWorkbook.Names.Add Name:="Manufacturer", RefersTo:=cRng
For Each cLoc In ws.Range("Manufacturer") 'or For Each cLoc In cRng
With Me.MFGBOX
.AddItem cLoc.Value
End With
Next cLoc
End Sub
如您所见,我们有三种不同类型的节点:var elements = [
{ group: "nodes", data: { id: "n0", type: "foo"}, position: { x: 100, y: 100 } },
{ group: "nodes", data: { id: "n1", type: "bar"}, position: { x: 200, y: 200 } },
{ group: "nodes", data: { id: "n2", type: "foo"}, position: { x: 300, y: 300 } },
{ group: "nodes", data: { id: "n3", type: "biz"}, position: { x: 400, y: 400 } },
{ group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
];
var style = cytoscape.stylesheet()
.selector('node[type = "foo"]').css({
'background-color': 'red',
'content': function(ele){
return "Is a foo: " + ele.data().id;
}
})
.selector('node[type = "bar"]').css({
'background-color': 'blue',
'content':function(ele){
return "Is a bar: " + ele.data().id;
}
})
.selector('node[type = "biz"]').css({
'background-color': 'green',
'content': function(ele){
return ele.data().id;
}
})
;
var dom = $('#graph');
var cy = cytoscape({
container: dom,
elements: elements,
style: style
});
,foo
和bar
。
我们已指定选择器对它们进行不同的着色,并根据节点类型显示自定义标签。
此代码可以正常工作:
但是现在我想抽象出样式的分配,以避免在分配选择器和样式时重复代码。
为此,我创建了一个biz
对象。
Config
代码现在停止工作。颜色样式工作正常,但所有标签功能都相同。
我认为这可能是Javascript闭包的一个问题,所以我将这个函数包装在IIFE中,但是它也没有解决它。
var Config = function(type, color, message){
this.color = color;
this.fn = function(ele){
var eleMessage = (message)? message + ele.data().id : ele.data().id;
return eleMessage;
};
this.selector = 'node[type = "' + type + '"]';
}
var configs = [
new Config("foo", "red", "this is foo"),
new Config("bar", "blue", "this is bar"),
new Config("biz", "green")
];
for (var i in configs){
var config = configs[i];
style.selector(config.selector)
.css({'background-color': config.color, 'content': config.fn});
}
有任何解决此问题的建议吗?