使用GOJS实现tree结构

实现的效果图如下：

CSS:

  <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>

HTML：

<div id="sample">
  <div id="regionTree" style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
</div>

JavaScript：

<script src="../libs/jquery/jquery-3.4.1.min.js"></script>
<script src="../libs/goJs/go.js"></script>

<script id="code">
  $(function(){
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    regionTree = $(go.Diagram, "regionTree",  // must be the ID or reference to div
                  {
                      "toolManager.hoverDelay": 100,  // 100 milliseconds instead of the default 850
                      allowCopy: false,
                      layout:  // create a TreeLayout for the family tree
                      $(go.TreeLayout,
                          { angle: 90, nodeSpacing: 10, layerSpacing: 40, layerStyle: go.TreeLayout.LayerUniform })
                  });

    var bluegrad = '#90CAF9';
    var pinkgrad = '#F48FB1';
    var greengrad = 'green';
    var cyangrad = 'cyan';
    var skybluegrad = 'skyblue';

    // Set up a Part as a legend, and place it directly on the diagram
    regionTree.add(
      $(go.Part, "Table",
        { position: new go.Point(300, 10), selectable: false },
        $(go.TextBlock, "北京",
          { row: 0, font: "700 14px Droid Serif, sans-serif" }),  // end row 0
        $(go.Panel, "Horizontal",
          { row: 1, alignment: go.Spot.Left },
          $(go.Shape, "Rectangle",
            { desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
          $(go.TextBlock, "通州区",
            { font: "700 13px Droid Serif, sans-serif" })
        ),  // end row 1
        $(go.Panel, "Horizontal",
          { row: 2, alignment: go.Spot.Left },
          $(go.Shape, "Rectangle",
            { desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
          $(go.TextBlock, "丰台区",
            { font: "700 13px Droid Serif, sans-serif" })
        )  // end row 2
      ));

    // define Converters to be used for Bindings
    function genderBrushConverter(gender) {
      if (gender === "0") return bluegrad;
      if (gender === "1") return pinkgrad;
      if (gender === "2") return greengrad;
      if (gender === "3") return cyangrad;
      if (gender === "4") return skybluegrad;
      return "orange";
    }

    // replace the default Node template in the nodeTemplateMap
    regionTree.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("text", "name"),
        $(go.Shape, "Rectangle",
          {
            fill: "lightgray",
            stroke: null, strokeWidth: 0,
            stretch: go.GraphObject.Fill,
            alignment: go.Spot.Center
          },
          new go.Binding("fill", "gender", genderBrushConverter)),
        $(go.TextBlock,
          {
            font: "700 12px Droid Serif, sans-serif",
            textAlign: "center",
            margin: 10, maxSize: new go.Size(80, NaN)
          },
          new go.Binding("text", "name"))
      );

    // define the Link template
    regionTree.linkTemplate =
      $(go.Link,  // the whole link panel
        { routing: go.Link.Orthogonal, corner: 5, selectable: false },
        $(go.Shape, { strokeWidth: 3, stroke: '#424242' }));  // the gray link shape

    // here's the family data
    var nodeDataArray = [
      { key: 0, name: "北京", gender: "0", birthYear: "1865", deathYear: "1936", reign: "1910-1936" },
      { key: 1, parent: 0, name: "通州区", gender: "1", birthYear: "1894", deathYear: "1972", reign: "1936" },
      { key: 2, parent: 0, name: "丰台区", gender: "1", birthYear: "1895", deathYear: "1952", reign: "1936-1952" },
      { key: 7, parent: 2, name: "云冈", gender: "2", birthYear: "1926", reign: "1952-" },
      { key: 16, parent: 7, name: "王佐镇", gender: "3", birthYear: "1948" },
      { key: 38, parent: 16, name: "东王佐村", gender: "4", birthYear: "1982" },
      { key: 39, parent: 16, name: "佃起村", gender: "4", birthYear: "1984" },
      ];

    // create the model for the family tree
    regionTree.model = new go.TreeModel(nodeDataArray);
  })
</script>