如何在Gojs中的节点内添加href?

时间:2015-07-02 11:43:06

标签: javascript href gojs

我用GoJS创建了一个图表。 我需要每个节点都包含一个href。

       var template = GO(go.Node, "Auto",
                        {desiredSize: new go.Size(width, height) },                 
                          GO(go.Shape, shapeMap.getValue(shape), new go.Binding("fill", "fill")),                            
                          GO(go.TextBlock,{textAlign: 'center', margin: 4 }, new go.Binding("stroke", "color"), new go.Binding("text", "text")));



    var node = {key:src, color:textColor, fill:backgroundColor, category:shape ,text:"www.google.com" };

    diagram.model.addNodeData(node);        
}

}

我试图插入一个Html内容。

  var node = {key:src, color:textColor, fill:backgroundColor, category:shape ,text:<a href='www.google.com'>href</a> }; 

但它不起作用。 我怎么能这样做?

2 个答案:

答案 0 :(得分:2)

TextBlock不呈现HTML,而只是一个字符串作为文本块。

如果将URL放在节点数据中,则可以声明一个打开窗口的GraphObject.click事件处理程序。 GO(go.Node, . . . { click: function(e, obj) { window.open("http://" + encodeURIComponent(obj.part.data.url)); } }, . . . GO(go.TextBlock, { textAlign: "center", margin: 4 }, new go.Binding("stroke", "color"), new go.Binding("text", "url")) ), . . . )

这适用于节点数据,例如: { url: "www.example.com" }

您可以在TextBlock.text绑定上使用转换函数来显示与data.url属性值不同的字符串。

http://gojs.net/latest/samples/euler.html

上的样本也证明了这一点

答案 1 :(得分:0)

将Click事件添加到TextBlock,并在单击功能中 - 打开新的网页。

GO(go.Node,...
  GO(go.TextBlock,{textAlign: 'center', click: function(e, obj) {window.open(obj.part.data.url)}}),...);