Можно ли с помощью принудительно направленного макета go.js исключить группы?

Я использую go.js для создания концептуальных карт с узлами, а в некоторых случаях с узлами внутри группы - связи всегда находятся между узлами, а не напрямую с контейнером группы, но есть связи между узлами внутри и снаружи групп.

Когда нет групп, силовая компоновка работает очень хорошо, чтобы правильно расположить узлы. Но если в группе есть узлы, то принудительно-ориентированное расположение создает группу таким образом, как если бы это был один узел, и это может быть неоптимальным для соединений узлов. Есть ли способ, чтобы компоновка была просто связана с узлами, даже если это означает, что группы могут перекрываться, быть больше, чем нужно, или перемешиваться иным образом? Группы для меня - это просто фоновые облака категорий, и это действительно те узлы, которые я хотел бы оптимально расположить.

Источник

1 ответ

Решение

Чтобы запретить группам участвовать в макетах, в шаблоне group вы можете установить isLayoutPositioned: false на Group,

Но если вы хотите, чтобы все узлы были затронуты одним и тем же макетом, а не только узлами верхнего уровня (узлами, не входящими в группы), вам придется сделать что-то вроде этого:

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>

Источник
Другие вопросы по тегам