GoJs1つの図に複数のレイアウトを含めることは可能ですか

あなたがあなたの目標を達成することができる多くの方法があります。私は3つのオフハンドを考えることができます。作業の降順：

• 必要なことを実行するカスタムレイアウトを作成します。これは最も一般的であり、結合する2つの既存の図で使用したデータ構造と最も互換性があります。
• In your case you might be able to use the TableLayout that is in the extensions directory: http://gojs.net/latest/extensions/Table.html. You probably could continue to use Groups, but you would set their Group.layout to null so that they are completely ignored when the layout is performed.
• Put everything in one of your existing diagrams into a Group and put everything from your other existing diagram into another Group. The Diagram.layout of the first would be the Group.layout of the first group, and the Diagram.layout of the second diagram would be the Group.layout of the second group.

Note that each Diagram can have exactly one Model (the Diagram.model), so for all three techniques you would need to add all of the data into a single model without getting references between them confused. That means you need to make sure the keys for the nodes are all unique.

Here's an example of how you can put two separate diagrams into a single diagram using the third technique. I'll start with two copies of the Minimal sample, http://gojs.net/latest/samples/minimal.html, where the only change is that one has a ForceDirectedLayout and the other one has a LayeredDigraphLayout. So one will be defined:

myDiagram = $(go.Diagram, "myDiagramDiv",
              {
                initialContentAlignment: go.Spot.Center,
                layout: $(go.ForceDirectedLayout),
                "undoManager.isEnabled": true
              });

and the other will be defined:

myDiagram = $(go.Diagram, "myDiagramDiv",
              {
                initialContentAlignment: go.Spot.Center,
                layout: $(go.LayeredDigraphLayout),
                "undoManager.isEnabled": true
              });

But otherwise these two diagrams are exactly like the Minimal sample.

Initially each model of Minimal is created by:

myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

So, we first need to create a combined model that is the two models added together. One way to put them together is:

myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" },
  { key: "Alpha2", color: "lightblue" },
  { key: "Beta2", color: "orange" },
  { key: "Gamma2", color: "lightgreen" },
  { key: "Delta2", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" },
  { from: "Alpha2", to: "Beta2" },
  { from: "Alpha2", to: "Gamma2" },
  { from: "Beta2", to: "Beta2" },
  { from: "Gamma2", to: "Delta2" },
  { from: "Delta2", to: "Alpha2" }
]);

Again, I'll mention that this is work you would need to do no matter which technique you used. Presumably you have already done this and are just wondering how to handle two layouts.

The third technique I suggested uses Groups to encapsulate what had originally been in a whole Diagram. So let us add two groups to the model and assign each of the original nodes to the corresponding group:

myDiagram.model = new go.GraphLinksModel(
[
  { key: "FD", isGroup: true, category: "FD" },  // NEW
  { key: "LD", isGroup: true, category: "LD" },  // NEW
  { key: "Alpha", color: "lightblue", group: "FD" },
  { key: "Beta", color: "orange", group: "FD" },
  { key: "Gamma", color: "lightgreen", group: "FD" },
  { key: "Delta", color: "pink", group: "FD" },
  { key: "Alpha2", color: "lightblue", group: "LD" },
  { key: "Beta2", color: "orange", group: "LD" },
  { key: "Gamma2", color: "lightgreen", group: "LD" },
  { key: "Delta2", color: "pink", group: "LD" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" },
  { from: "Alpha2", to: "Beta2" },
  { from: "Alpha2", to: "Gamma2" },
  { from: "Beta2", to: "Beta2" },
  { from: "Gamma2", to: "Delta2" },
  { from: "Delta2", to: "Alpha2" }
]);

Now we just need to define each group/category/template:

myDiagram.groupTemplateMap.add("FD",
  $(go.Group, "Auto",
    { layout: $(go.ForceDirectedLayout) },
    $(go.Shape, { fill: "white", stroke: "lightgray" }),
    $(go.Placeholder, { padding: 10 })
  ));

myDiagram.groupTemplateMap.add("LD",
  $(go.Group, "Auto",
    { layout: $(go.LayeredDigraphLayout) },
    $(go.Shape, { fill: "white", stroke: "lightgray" }),
    $(go.Placeholder, { padding: 10 })
  ));

For the purposes of this demonstration the details of the visual appearance of each kind of group does not matter, just as the details of the appearances of the nodes and links do not matter. What does matter to you is that one group template uses one layout and the other uses a different one, there are two group data objects, and all the node data is assigned to the appropriate group.

In this case each group template is being used as a singleton, but perhaps your requirements will result in using more than one of any or all of the group templates.

Now you just need to specify the Diagram.layout to control how the two groups are arranged relative to each other. Perhaps the simplest would be to use a GridLayout:

myDiagram = $(go.Diagram, "myDiagramDiv",
              {
                initialContentAlignment: go.Spot.Center,
                layout: $(go.GridLayout, { wrappingColumn: 1 }),
                "undoManager.isEnabled": true
              });

もちろん、まったく異なるレイアウトやカスタムレイアウトを使用するなど、必要に応じてレイアウトをカスタマイズできます。

これが完全なコードです。簡潔にするために、元のMinimalサンプルから一連のコメントを削除しました。

<!DOCTYPE html>
<html>
<head>
<title>Combining 2 Diagrams with Different Layouts</title>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.5/go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",
                  {
                    initialContentAlignment: go.Spot.Center,
                    layout: $(go.GridLayout, { wrappingColumn: 1 }),
                    "undoManager.isEnabled": true
                  });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "key"))
      );

    myDiagram.groupTemplateMap.add("FD",
      $(go.Group, "Auto",
        { layout: $(go.ForceDirectedLayout) },
        $(go.Shape, { fill: "white", stroke: "lightgray" }),
        $(go.Placeholder, { padding: 10 })
      ));

    myDiagram.groupTemplateMap.add("LD",
      $(go.Group, "Auto",
        { layout: $(go.LayeredDigraphLayout) },
        $(go.Shape, { fill: "white", stroke: "lightgray" }),
        $(go.Placeholder, { padding: 10 })
      ));

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "FD", isGroup: true, category: "FD" },
      { key: "LD", isGroup: true, category: "LD" },
      { key: "Alpha", color: "lightblue", group: "FD" },
      { key: "Beta", color: "orange", group: "FD" },
      { key: "Gamma", color: "lightgreen", group: "FD" },
      { key: "Delta", color: "pink", group: "FD" },
      { key: "Alpha2", color: "lightblue", group: "LD" },
      { key: "Beta2", color: "orange", group: "LD" },
      { key: "Gamma2", color: "lightgreen", group: "LD" },
      { key: "Delta2", color: "pink", group: "LD" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" },
      { from: "Alpha2", to: "Beta2" },
      { from: "Alpha2", to: "Gamma2" },
      { from: "Beta2", to: "Beta2" },
      { from: "Gamma2", to: "Delta2" },
      { from: "Delta2", to: "Alpha2" }
    ]);
  }
</script>
</head>
<body onload="init();">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:600px"></div>
</div>
</body>
</html>