gojs实现数据库表连接关系图表效果代码-html代码-BFW代码库

gojs实现数据库表连接关系图表效果代码

代码语言：html

所属分类：图表

代码描述：gojs实现数据库表连接关系图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
  <div id="allSampleContent" class="p-4 w-full">
    <script id="code">
    function init() {

      // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
      // For details, see https://gojs.net/latest/intro/buildingObjects.html
      const $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            validCycle: go.Diagram.CycleNotDirected,  // don't allow loops
            // For this sample, automatically show the state of the diagram's model on the page
            "ModelChanged": e => {
              if (e.isTransactionFinished) showModel();
            },
            "undoManager.isEnabled": true
          });

      // This template is a Panel that is used to represent each item in a Panel.itemArray.
      // The Panel is data bound to the item object.
      var fieldTemplate =
        $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
          new go.Binding("portId", "name"),  // this Panel is a "port"
          {
            background: "transparent",  // so this port's background can be picked by the mouse
            fromSpot: go.Spot.Right,  // links only go from the right side to the left side
            toSpot: go.Spot.Left,
            // allow drawing links from or to this port:
            fromLinkable: true, toLinkable: true
          },
          $(go.Shape,
            {
              width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
              // but disallow drawing links from or to this shape:
              fromLinkable: false, toLinkable: false
            },
            new go.Binding("figure", "figure"),
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              margin: new go.Margin(0, 5), column: 1, font: "bold 13px sans-serif",
              alignment: go.Spot.Left,
              // and disallow drawing links from or to this text:
              fromLinkable: false, toLinkable: false
            },
            new go.Binding("text", "name")),
          $(go.TextBlock,
            { margin: new go.Margin(0, 5), column: 2, font: "13px sans-serif", alignment: go.Spot.Left },
            new go.Binding("text", "info"))
        );

      // This template represents a whole "record".
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { copyable: false, deletable: false },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          // this rectangular shape surrounds the content of the node
          $(go.Shape,
            { fill: "#EEEEEE" }),
          // the content consists of a header and a list of items
          $(go.Panel, "Vertical",
            // this is the header for the whole node
            $(go.Panel, "Auto",
              { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
              $(go.Shape,
      .........完整代码请登录后点击上方下载按钮下载查看