我能有go.js力导向的布局排除组吗？

Question

我使用go.js与节点以及在某些情况下组内的节点进行概念映射--链接总是在节点之间，而不是直接指向组容器，但是组内和组外的节点之间有链接。

当没有组时，以力为导向的布局工作得很好，可以正确地划分节点。但是，如果一个组中有节点，强制定向的布局看起来就好像它是一个单一的节点，这对于节点连接来说可能是次优的。是否有办法让布局只关心节点，即使这意味着组可能是重叠的，比需要大或其他混乱？对于我来说，这些组只是背景类别云，它确实是我想要的最优排列的节点。

Answer 1

要阻止组参与布局，可以在groupTemplate中在Group上设置isLayoutPositioned: false。

但是，如果希望所有节点都受到相同布局的影响，而不仅仅是顶层节点(不在组中的节点)，那么您就必须这样做：

var layout = $(go.ForceDirectedLayout);
layout.doLayout(myDiagram.nodes);

而不是设置图表的布局。这样，布局将使用整个节点集，而不仅仅是顶级节点。

下面是一个简单的例子：

​

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

    myDiagram = $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle",
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );


    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        { isLayoutPositioned: false,
          selectionObjectName: "PANEL",  // selection handle goes around shape, not label
          ungroupable: true },  // enable Ctrl-Shift-G to ungroup a selected Group
        $(go.TextBlock,
          {
            font: "bold 19px sans-serif",
            isMultiline: false,  // don't allow newlines in text
            editable: true  // allow in-place editing by user
          },
          new go.Binding("text", "text").makeTwoWay(),
          new go.Binding("stroke", "color")),
        $(go.Panel, "Auto",
          { name: "PANEL" },
          $(go.Shape, "Rectangle",  // the rectangular shape around the members
            { fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3 }),
          $(go.Placeholder, { padding: 10 })  // represents where the members are
        )
      );

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", group: "G", color: "lightgreen" },
      { key: "Delta", group: "G", color: "pink" },
      { key: "G", isGroup: true, color: "pink" },
      
    ],
    [
    ]);
    
    var layout = $(go.ForceDirectedLayout);
    layout.doLayout(myDiagram.nodes);
    
    
    
  }

init();

<script src="http://gojs.net/latest/release/go.js"></script>
<body>

  <div id="myDiagram" style="border: solid 3px red; width:400px; height:400px"></div>
    
</body>

​