GoJS 显示不正确的图表类型答案

【问题标题】：GoJS showing incorrect diagram typeGoJS 显示不正确的图表类型
【发布时间】：2020-04-03 11:33:17
【问题描述】：

我需要生成一个能够显示来自服务器的 JSON 数据的图表。我使用 GoJS 生成图表。所以我使用该站点的示例来构建我自己的项目。一切看起来都如我所愿。

myDiagram.model = new go.TreeModel([
    { key: "Root", wallet: "data", color: lavgrad },
    { key: "Left1", wallet: "data", parent: "Root", dir: "left", color: bluegrad },
    { key: "Left3", wallet: "data", parent: "Root", dir: "left", color: bluegrad },
    { key: "leaf1", wallet: "data", parent: "Left1" },
    { key: "leaf2", wallet: "data", parent: "Left1" },
    { key: "Left2", wallet: "data", parent: "Left1", color: bluegrad },
    { key: "leaf3", wallet: "data", parent: "Left2" },
    { key: "leaf4", wallet: "data", parent: "Left2" },
    { key: "Right1", wallet: "data", parent: "Root", dir: "right", color: yellowgrad },
    { key: "Right2", wallet: "data", parent: "Right1", color: yellowgrad },
    { key: "leaf5", wallet: "data", parent: "Right2" },
    { key: "leaf6", wallet: "data", parent: "Right2" },
    { key: "leaf7", wallet: "data", parent: "Right2" },
    { key: "leaf8", wallet: "data", parent: "Right1" },
    { key: "leaf9", wallet: "data", parent: "Right1" }
]);
doubleTreeLayout(myDiagram);

first picture

在此之后，我尝试删除硬编码的图表结构并改为从 JSON 中解析它。这是我的代码。

JSON 文件

{
  "data":[
    {
      "key": "Root",
      "wallet": "data"
    },
    {
      "key": "Left1",
      "wallet": "data",
      "parent": "Root",
      "dir": "left"
    },
    {
      "key": "Left3",
      "wallet": "data",
      "parent": "Root",
      "dir": "left"
    },
    {
      "key": "leaf1",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "leaf2",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "Left2",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "leaf3",
      "wallet": "data",
      "parent": "Left2"
    },
    {
      "key": "leaf4",
      "wallet": "data",
      "parent": "Left2"
    },
    {
      "key": "Right1",
      "wallet": "data",
      "parent": "Root",
      "dir": "right"
    },
    {
      "key": "Right2",
      "wallet": "data",
      "parent": "Right1"
    },
    {
      "key": "leaf5",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf6",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf7",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf8",
      "wallet": "data",
      "parent": "Right1"
    },
    {
      "key": "leaf9",
      "wallet": "data",
      "parent": "Right1"
    }
  ]
}

JS 文件

jQuery.getJSON("minimal.json", load);
function load(jsondata) {
   myDiagram.model = new go.TreeModel(jsondata["data"]);
}

second picture

但正如您所见，结果与上面的第一张图片不同（它只是按随机顺序排列的）。该结果在控制台中没有任何错误或警告消息。所以我无法弄清楚我做错了什么以及为什么数据以随机顺序显示。

【问题讨论】：

标签： javascript json gojs

【解决方案1】：

缺少的是图表的布局。我建议您使用较新的 Double Tree 示例：https://gojs.net/latest/samples/doubleTree.html

注意它如何使用 DoubleTreeLayout 扩展并设置 Diagram.layout 以便布局自动发生。 https://gojs.net/latest/api/symbols/DoubleTreeLayout.html

这与您开始时使用的旧代码不同，它有一个 doubleTreeLayout 函数以编程方式执行布局。

$(go.Diagram, "myDiagramDiv",
  {
    layout: $(DoubleTreeLayout,
      {
        // choose whether this subtree is growing towards the right or towards the left:
        directionFunction: function(n) { return n.data && n.data.dir !== "left"; }
      })
  });

或者，您可以在加载模型后调用doubleTreeLayout()。但是，每次用户展开或折叠子树时，您也需要这样做。而通过设置 Diagram.layout，布局将在节点和链接出现或消失时再次自动执行。

【讨论】：