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

How to add href inside node in Gojs?

本文关键字：节点 内部 添加 href Gojs      更新时间：2023-09-26

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

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

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，并在点击功能中打开新的网页。

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