Cytoscape内容样式功能在动态生成时不起作用

时间:2015-11-29 21:33:56

标签: javascript closures iife cytoscape

我正在使用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 }); foobar

我们已指定选择器对它们进行不同的着色,并根据节点类型显示自定义标签。

此代码可以正常工作:

enter image description here

但是现在我想抽象出样式的分配,以避免在分配选择器和样式时重复代码。

为此,我创建了一个biz对象。

Config

代码现在停止工作。颜色样式工作正常,但所有标签功能都相同。

enter image description here

我认为这可能是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});
    }

有任何解决此问题的建议吗?

0 个答案:

没有答案