GoJS是一個JavaScript庫，可讓您在現(xiàn)代Web瀏覽器中輕松創(chuàng)建交互式圖表。本文所介紹的思維導(dǎo)圖是一種蜘蛛圖，它圍繞中心概念組織信息，是表達發(fā)散性思維的有效圖形思維工具。

通過移動最接近樹根節(jié)點的節(jié)點來控制布局。當其中一個節(jié)點水平移動到根的另一側(cè)時，其所有子節(jié)點將以新方向發(fā)送到Layout.doLayout，從而導(dǎo)致文本始終從根向外移動。該spotConverter功能用于管理 GraphObject.fromSpot和GraphObject.toSpot手動節(jié)點，所以TreeLayout.setsPortSpot和TreeLayout.setsChildPortSpot 屬性被設(shè)置為假，使布圖所述圖將不會覆蓋值。

刪除節(jié)點時，CommandHandler.deletesTree屬性確保使用它刪除所有子節(jié)點。拖動節(jié)點時，DraggingTool.dragsTree 屬性確保用它拖動所有子節(jié)點。這兩個都是在Diagram的初始化期間設(shè)置的。

節(jié)點模板還定義了Part.selectionAdornmentTemplate，以允許創(chuàng)建新節(jié)點，并使用附加命令創(chuàng)建GraphObject.contextMenu。

想要了解更多相關(guān)信息請點擊。

在頁面中查看此示例頁面的源代碼

function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          padding: 20,
          // when the user drags a node, also move/copy/delete the whole subtree starting with that node
          "commandHandler.copiesTree": true,
          "commandHandler.deletesTree": true,
          "draggingTool.dragsTree": true,
          initialContentAlignment: go.Spot.Center,  // center the whole graph
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    // a node consists of some text with a line shape underneath
    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { selectionObjectName: "TEXT" },
        $(go.TextBlock,
          {
            name: "TEXT",
            minSize: new go.Size(30, 15),
            editable: true
          },
          // remember not only the text string but the scale and the font in the node data
          new go.Binding("text", "text").makeTwoWay(),
          new go.Binding("scale", "scale").makeTwoWay(),
          new go.Binding("font", "font").makeTwoWay()),
        $(go.Shape, "LineH",
          {
            stretch: go.GraphObject.Horizontal,
            strokeWidth: 3, height: 3,
            // this line shape is the port -- what links connect with
            portId: "", fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides
          },
          new go.Binding("stroke", "brush"),
          // make sure links come in from the proper direction and go out appropriately
          new go.Binding("fromSpot", "dir", function(d) { return spotConverter(d, true); }),
          new go.Binding("toSpot", "dir", function(d) { return spotConverter(d, false); })),
        // remember the locations of each node in the node data
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        // make sure text "grows" in the desired direction
        new go.Binding("locationSpot", "dir", function(d) { return spotConverter(d, false); })
      );

想要查看完整代碼請點擊。

在GitHub上查看此示例頁面的源代碼

function spotConverter(dir, from) {
    if (dir === "left") {
      return (from ? go.Spot.Left : go.Spot.Right);
    } else {
      return (from ? go.Spot.Right : go.Spot.Left);
    }
  }
  function changeTextSize(obj, factor) {
    var adorn = obj.part;
    adorn.diagram.startTransaction("Change Text Size");
    var node = adorn.adornedPart;
    var tb = node.findObject("TEXT");
    tb.scale *= factor;
    adorn.diagram.commitTransaction("Change Text Size");
  }
  function toggleTextWeight(obj) {
    var adorn = obj.part;
    adorn.diagram.startTransaction("Change Text Weight");
    var node = adorn.adornedPart;
    var tb = node.findObject("TEXT");
    // assume "bold" is at the start of the font specifier
    var idx = tb.font.indexOf("bold");
    if (idx < 0) {
      tb.font = "bold " + tb.font;
    } else {
      tb.font = tb.font.substr(idx + 5);
    }
    adorn.diagram.commitTransaction("Change Text Weight");
  }
  function updateNodeDirection(node, dir) {
    myDiagram.model.setDataProperty(node.data, "dir", dir);
    // recursively update the direction of the child nodes
    var chl = node.findTreeChildrenNodes(); // gives us an iterator of the child nodes related to this particular node
    while(chl.next()) {
      updateNodeDirection(chl.value, dir);
    }
  }
  function addNodeAndLink(e, obj) {
    var adorn = obj.part;
    var diagram = adorn.diagram;
    diagram.startTransaction("Add Node");
    var oldnode = adorn.adornedPart;
    var olddata = oldnode.data;
    // copy the brush and direction to the new node data
    var newdata = { text: "idea", brush: olddata.brush, dir: olddata.dir, parent: olddata.key };
    diagram.model.addNodeData(newdata);
    layoutTree(oldnode);
    diagram.commitTransaction("Add Node");
    // if the new node is off-screen, scroll the diagram to show the new node
    var newnode = diagram.findNodeForData(newdata);
    if (newnode !== null) diagram.scrollToRect(newnode.actualBounds);
  }
  function layoutTree(node) {
    if (node.data.key === 0) {  // adding to the root?
      layoutAll();  // lay out everything
    } else {  // otherwise lay out only the subtree starting at this parent node
      var parts = node.findTreeParts();
      layoutAngle(parts, node.data.dir === "left" ? 180 : 0);
    }
  }

想要查看完整代碼請點擊。