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

Question

我用 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(节点);

我尝试插入一个Html内容。

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

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

Answer 1

TextBlock 不呈现 HTML，而只是作为文本块的字符串。

如果您将 URL 放入您的节点数据中，您可以声明一个 GraphObject.click 事件处理程序来打开 window.

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

处的示例也证明了这一点

Answer 2

为TextBlock添加点击事件，点击函数中-打开新网页。

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

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

How to add href inside node in Gojs?

javascript

href

gojs