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

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

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

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

想要了解更多相關(guān)信息請(qǐng)點(diǎn)擊。

在頁(yè)面中查看此示例頁(yè)面的源代碼

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); })
      );

想要查看完整代碼請(qǐng)點(diǎn)擊。

在GitHub上查看此示例頁(yè)面的源代碼

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);
    }
  }

想要查看完整代碼請(qǐng)點(diǎn)擊。