Question

我使用go.js制作带有节点的概念图，在某些情况下使用组内的节点 - 链接始终位于节点之间，而不是直接连接到组容器，但组内外的节点之间存在链接。

当没有组时，力导向布局可以很好地适当地隔开节点。但是如果组中有节点，则强制定向布局似乎将组布局为好像它是单个节点，这对于节点连接来说可能是次优的。有没有办法让布局只关注节点，即使这意味着组可能重叠，大于需要或以其他方式混乱？对我来说，这些组只是背景类别云，它实际上是我想要最佳排列的节点。

Answer 1

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

但是如果您希望所有节点都受到相同布局的影响，而不仅仅是顶级节点（不在组中的节点），那么您将不得不这样做：

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

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

这是一个简单的例子：

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>

我可以go.js强制导向布局排除群组吗？

1 个答案: