gojs实现家族族谱图及弹窗编辑效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现家族族谱图及弹窗编辑效果代码, 弹出图层编辑是使用jquery.fancybox插件实现。

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

<!DOCTYPE html>
<html lang="en" >

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

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  padding: 10px;
}

.chart {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}

.hidden {
  display: none;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.fancybox.3.5.7.css">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.fancybox.3.5.7.js"></script>
  
  
</head>

<body>
  <div id="familyDiagram" class="chart"></div>
<form id="form1" action="" method="post" class="hidden">
  <p>
    <div>姓名：</div>
    <input type="text" value="陳〇〇" name="name" />
  </p>
  <p>
    <div>出生日期：</div>
    <input type="text" value="2010-10-31" name="birthday" />
  </p>
  <p>
    <div>性別：</div>
    <select name="gender">
      <option value="M">男性</option>
      <option value="F" selected>女性</option>
    </select>
  </p>
  <p>
    <div>關係：</div>
    <select name="relation">
      <option value="">兒女</option>
    </select>
  </p>
  <p>
    <input type="submit" value="送出" />
  </p>
</form>

      <script>
function init() {
  var $ = go.GraphObject.make;
  myDiagram =
    $(go.Diagram, "familyDiagram", {
    initialAutoScale: go.Diagram.Uniform,
    "undoManager.isEnabled": true,
    maxSelectionCount: 1,
    isReadOnly: true,
    //isEnabled: false,
    allowSelect: false,
    nodeSelectionAdornmentTemplate: $(go.Adornment, "Auto", {
      layerName: "Grid"
    },
                                      $(go.Shape, "Circle", {
      fill: "yellow",
      stroke: null
    }),
                                      $(go.Placeholder)
                                     ),
    layout: $(GenogramLayout, {
      direction: 90,
      layerSpacing: 30,
      columnSpacing: 10
    })
  });

  function findHeadShot(gender) {
    return gender === "M" ? "https://png.pngtree.com/svg/20170705/498034869c.png" :
    "https://png.pngtree.com/svg/20170705/49805b929c.png";
    //return "./images/" + gender + ".png";
  }

  // two different node templates, one for each sex,
  // named by the category value in the node data object
  // myDiagram.nodeTemplateMap.add("M",  // male
  //   $(go.Node, "Vertical",
  //     // { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
  //     $(go.Panel,
  //       // { name: "ICON" },
  //       $(go.Shape, "Square",
  //         { width: 40, height: 40, strokeWidth: 2, fill: "white", portId: "" }
  //       )
  //       // $(go.Picture,
  //       //   { width: 40, height: 40, imageStretch: go.GraphObject.UniformToFill },
  //       //   new go.Binding("source", "key", findHeadShot)
  //       // )
  //     ),
  //     $(go.TextBlock,
  //       { textAlign: "center", maxSize: new go.Size(80, NaN) },
  //       new go.Binding("text", "n")
  //     )
  //   )
  // );

  myDiagram.nodeTemplateMap.add("M",
                                $(go.Node, "Vertical", {
    /* selectable: true, */
    click: function (e, obj) {
      /* console.log(obj);  */
      console.log("Clicked on " + obj.part.data.key);
      jQuery.fancybox.open({
        src: '#form1',
        type: 'inline',
        opts: {
          touch: false,
          afterShow: function (instance, current) {
            console.info('done!');
          }
        }
      });
    }
    // selectionChanged: function(part) {
    //   var shape = part.elt(0);
    //   // shape.fill = part.isSelected ? "red" : "white";
    //   console.log('selectionChanged');
    //   console.log(part);
    // }
  },
                                  $(go.Panel, "Spot",
                                    $(go.Shape, "Circle", {
    width: 45,
    strokeWidth: 1,
    fill: "#aac8ff",
    portId: ""
  }),
                                    $(go.Panel, "Spot", {
    isClipping: true
  },
                                      $(go.Shape, "Circle", {
    width: 40,
    strokeWidth: 0
  }),
                                      $(go.Picture, {
    width: 40,
    height: 40,
    imageStretch: go.GraphObject.UniformToFill
  },
                                        new go.Binding("source", "gender", findHeadShot)
                                       ),
                                      $(go.Panel,
                                        $(go.Shape, {
    stroke: null,
    strokeWidth: 0,
    fill: "gray"
  },
                                          new go.Binding("geometry", "", function () {
    return go.Geometry.parse("F M38 0 L40 0 40 2 2 40 0 40 0 38z");
  })
                                         ),
                                        new go.Binding("visible", "", function (data) {
    return data.dead === true;
  })
                                       )
                                     ),
                                    new go.Binding("opacity", "", function (data) {
    return data.dead === true ? 0.2 : 1;
  })
                                   ),
                                  $(go.TextBlock, {
    textAlign: "center",
    maxSize: new go.Size(80, NaN),
    margin: new go.Margin(5, 0, 0, 0)
  },
                                    new go.Binding("text", "name")
                                   ),
                                  $(go.TextBlock, {
    maxSize: new go.Size(80, NaN),
    margin: new go.Margin(5, 0, 0, 0)
  },
                                    new go.Binding("text", "birthday")
                                   ),
                                  $(go.TextBlock, {
    maxSize: new go.Size(80, NaN),
    margin: new go.Margin(5, 0, 0, 0)
  },
                                    new go.Binding("text", "title"),
                                    new go.Binding("visible", "", function (data) {
    return data.title !== undefined;
  })
                                   )
                                 )
                .........完整代码请登录后点击上方下载按钮下载查看