显示二叉树图 Panel

最近在做这方面的项目，需要用到圆形的背景以及在其中显示图品以及信息，在此和大家分享一下

var $ = go.GraphObject.make;
var myDiagram =
 $(go.Diagram, "myDiagramDiv",
   {
     initialContentAlignment: go.Spot.Center, // center Diagram contents
     "undoManager.isEnabled": true, // enable Ctrl-Z toundo and Ctrl-Y to redo
     layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
               { angle: 90, layerSpacing:25 })
   });

//连接线条的设置
myDiagram.linkTemplate =
 $(go.Link,
   { routing: go.Link.Orthogonal, corner: 5 },
   $(go.Shape, { strokeWidth: 2, stroke: "#555" })
   );
//方法1：   节点设置

// myDiagram.nodeTemplate =$(go.Node, "Horizontal",
//    { background: "#44CCFF",height:60,defaultStretch: go.GraphObject.Horizontal},
//    $(go.Picture,
//      { margin: 10, width: 30, height: 30, background: "red"},
//      new go.Binding("source")),
//    $(go.TextBlock, "Default Text",
//      { margin: 4, stroke: "white",alignment: go.Spot.Left, font: "bold 12px sans-serif",isMultiline: true, textAlign: "center"},
//      new go.Binding("text", "hu_nickname"))
//  );
 
//方法2：   节点设置
myDiagram.nodeTemplate =
     $(go.Node, "Auto",
       { deletable: false,width:100},
       new go.Binding("text", "name"),
       $(go.Shape, "Circle",
         { fill: "#39bddb",
         stroke: null 
//            stretch: go.GraphObject.Fill,
//            alignment: go.Spot.Top 
              },
         new go.Binding("fill")),
       $(go.Panel, "Vertical",
         $(go.Panel,"Spot",
            { isClipping: true  },
        $(go.Shape, "Circle",
        { fill: "#fff",width:40},
        new go.Binding("fill")),
        $(go.Picture,
     { margin: 2, width: 45, height: 45, background: "red"},
     new go.Binding("source"))
        ),
         
         $(go.TextBlock,"Default Text",
           { margin: 4, stroke: "white",font: "bold 12px sans-serif"},
     new go.Binding("text", "hu_nickname"))
       )
    );
 
var model = $(go.TreeModel);

model.nodeDataArray =
[
 { key: "1",              hu_nickname: "Don Meow",source: "img/cat1.png" },
 { key: "2", parent: "1", hu_nickname: "Demeter",source: "img/cat2.png" },
 { key: "3", parent: "1", hu_nickname: "Copricat", source: "img/cat3.png" },
 { key: "4", parent: "3", hu_nickname: "Jellylo", source: "img/cat4.png" },
 { key: "5", parent: "3", hu_nickname: "Alonzo", source: "img/cat5.png" },
 { key: "6", parent: "2", hu_nickname: "Munkus", source: "img/cat6.png" }
];
myDiagram.model = model;

var Select_Port = null;

效果图如下