GoJs中标题和缩略图使用技巧

//data
nodes: [
    { key: "1", color: "#99FFFF", text: "三国", figure: "Rectangle" },
    { key: "1-1", color: "#FF0000", text: "魏", figure: "Circle" },
    { key: "1-2", color: "#FFFF66", text: "蜀", figure: "Circle" },
    { key: "1-3", color: "#0000FF", text: "吴", figure: "Circle" },
  ],
  links: [
    {
      from: "1",
      to: "1-1",
    },
    {
      from: "1",
      to: "1-2",
    },
    {
      from: "1",
      to: "1-3",
    },
  ],
  //methods
  this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Vertical",
    $$(
      go.Shape,
      "Circle",
      { width: 30, height: 30, name: "ICON" },
      new go.Binding("fill", "color"),
      new go.Binding("figure", "figure")
    ),
    $$(go.TextBlock,new go.Binding("text", "text"))
  );

this.myDiagram.add(
    $$(go.Part, { location: new go.Point(0, -80) },
    $$(go.TextBlock, "三国争霸", { font: "bold 24pt sans-serif", stroke: "#67B73C" }))
);

this.myDiagram.add(
    $$(
      go.Part,
      { _viewPosition: new go.Point(900, 120), layerName: "Grid" },
      $$(go.TextBlock, "三国争霸", {
        font: "bold 24pt sans-serif",
        stroke: "green",
      })
    )
);
this.myDiagram.addDiagramListener("ViewportBoundsChanged", function (e) {
    e.diagram.commit(function (obj) {
      obj.parts.each(function (part) {
        if (part._viewPosition) {
          part.position = obj.transformViewToDoc(part._viewPosition);
          part.scale = 1 / obj.scale;
        }
      });
    });
});

//html
<div id="myOverviewDiv"></div>
//methods
let myOverview =
    $$(go.Overview, "myOverviewDiv",
    { observed: this.myDiagram }
)