Какие javascript включаемые файлы необходимы, чтобы заставить расширения макета работать в cytoscape? - PullRequest
Новая
       15

Какие javascript включаемые файлы необходимы, чтобы заставить расширения макета работать в cytoscape?

1 голос
/ 22 марта 2020

Cytoscape Javascript Графическое программное обеспечение поставляется с несколькими встроенными макетами, а также с другими макетами, которые создаются как «расширения». Я попытался использовать макет «klay», который является расширением, и я просто получаю JavaScript ошибок. (Код, который у меня работает, прекрасно работает со встроенными макетами, такими как 'cose', но не работает с расширениями. Вот включенные файлы, которые я использовал: 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"></script>
<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>   
<script type="text/javascript" src="scripts/cytoscape-klay.js"></script>

Так что же я здесь делаю неправильно? правильные «включаемые» файлы, код должен работать, потому что использование макетов должно быть таким же для встроенных макетов, как макеты расширений. Спасибо.

1 Ответ

3 голосов
/ 23 марта 2020

После демоверсии я все заработал так: 

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    // demo your layout
    layout: {
      name: "klay"

      // some more options here...
    },

    style: [{
        selector: "node",
        style: {
          "background-color": "#dd4de2"
        }
      },

      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "line-color": "#dd4de2",
          "target-arrow-color": "#dd4de2",
          opacity: 0.5
        }
      }
    ],

    elements: {
      nodes: [{
          data: {
            id: "n0"
          }
        },
        {
          data: {
            id: "n1"
          }
        },
        {
          data: {
            id: "n2"
          }
        },
        {
          data: {
            id: "n3"
          }
        },
        {
          data: {
            id: "n4"
          }
        },
        {
          data: {
            id: "n5"
          }
        },
        {
          data: {
            id: "n6"
          }
        },
        {
          data: {
            id: "n7"
          }
        },
        {
          data: {
            id: "n8"
          }
        },
        {
          data: {
            id: "n9"
          }
        },
        {
          data: {
            id: "n10"
          }
        },
        {
          data: {
            id: "n11"
          }
        },
        {
          data: {
            id: "n12"
          }
        },
        {
          data: {
            id: "n13"
          }
        },
        {
          data: {
            id: "n14"
          }
        },
        {
          data: {
            id: "n15"
          }
        }
      ],
      edges: [{
          data: {
            source: "n0",
            target: "n1"
          }
        },
        {
          data: {
            source: "n1",
            target: "n2"
          }
        },
        {
          data: {
            source: "n1",
            target: "n3"
          }
        },
        {
          data: {
            source: "n2",
            target: "n4"
          }
        },
        {
          data: {
            source: "n4",
            target: "n5"
          }
        },
        {
          data: {
            source: "n4",
            target: "n6"
          }
        },
        {
          data: {
            source: "n6",
            target: "n7"
          }
        },
        {
          data: {
            source: "n6",
            target: "n8"
          }
        },
        {
          data: {
            source: "n8",
            target: "n9"
          }
        },
        {
          data: {
            source: "n8",
            target: "n10"
          }
        },
        {
          data: {
            source: "n10",
            target: "n11"
          }
        },
        {
          data: {
            source: "n11",
            target: "n12"
          }
        },
        {
          data: {
            source: "n12",
            target: "n13"
          }
        },
        {
          data: {
            source: "n13",
            target: "n14"
          }
        },
        {
          data: {
            source: "n13",
            target: "n15"
          }
        }
      ]
    }
  }));
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}
<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

В демоверсии обычно используется локальный файл cytoscape-klay, поэтому проблем на самом деле не должно быть. Этот код работает для вас?

...