GoJS показывает неверный тип диаграммы - PullRequest
Новая
       75

GoJS показывает неверный тип диаграммы

1 голос
/ 03 апреля 2020

Мне нужно сгенерировать диаграмму, которая может отображать данные из 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);

первое изображение

После этого я попытался удалить жестко закодированную структуру диаграммы и вместо этого разобрать ее с 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"]);
}

вторая картинка

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

1 Ответ

1 голос
/ 03 апреля 2020

Чего не хватает, так это схемы диаграммы. Я предлагаю вам использовать более новый образец 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 макет будет автоматически выполняться снова, когда узлы и ссылки появляются или исчезают.

...