如何在Gojs中的节点内添加href？答案

【问题标题】：How to add href inside node in Gojs?如何在Gojs中的节点内添加href？
【发布时间】：2015-07-02 11:43:05
【问题描述】：

我用 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>
};

但它不起作用。我该怎么做？

【问题讨论】：

标签： javascript href gojs

【解决方案1】：

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的示例也证明了这一点

【讨论】：

这正是我所做的解决方案！我只是在 textBlock 中添加了 click 函数，所以它就像真正的 href 一样使用。 GO(go.TextBlock,{font: "7pt serif", click: function(e, obj) {obj.part.data.txtPart2 === '[UMS]' ? window.open("https://" + obj.part.data.key + ":8090") :"";}})，无论如何，非常感谢您的回答。

【解决方案2】：

给TextBlock添加点击事件，并在点击功能中——打开新网页。

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

【讨论】：