Блог

Главная - Вопросы по программированию - Как указать подразделение для cytoscape.js в html?

Как указать подразделение для cytoscape.js в html?

#html #css #cytoscape.js

Вопрос:

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

Однако я не могу указать это в конкретном подразделении, подразделение «#cy» не находится в пространстве правильного разделения. Более подробно, когда я буду разрабатывать страницу с несколькими содержимыми, я хочу ограничить представление взаимодействия (с помощью cytoscpae) определенным разделом в HTML. Я думаю, что-то нужно изменить в стиле разделения «#cy», но не могу этого сделать.

Я хотел бы получить любое предложение/помощь по этому поводу.

Заранее спасибо,

Сантош

Моя текущая HTML-страница выглядит следующим образом:

 <!doctype html>
<html>
<head>
    <title>Cytoscape example</title>
    <script src='cytoscape.min.js'></script>
</head>
<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<body>
<div>
<h1> Interactions </h1>
<h1> Test data </h1>
</div>
<div id="cy"></div>
<script>
      var cy = cytoscape({
        container: document.getElementById('cy'),
elements: [
  // nodes
  { data: { id: 'a', type: "met" } },
  { data: { id: 'b', type: "met" } },
  { data: { id: 'c', type: "prot" } },
  { data: { id: 'd', type: "prot" } },
  { data: { id: 'e', type: "prot" } },
  { data: { id: 'f', type: "prot" } },
  // edges
  {
    data: {
      id: 'ab',
      source: 'a',
      target: 'b'
    }
  },
  {
     data: {
      id: 'ae',
      source: 'a',
      target: 'e'
    }
  }, 
  {
    data: {
      id: 'cd',
      source: 'c',
      target: 'd'
    }
  },
  {
    data: {
      id: 'ef',
      source: 'e',
      target: 'f'
    }
  },
  {
    data: {
      id: 'ac',
      source: 'a',
      target: 'c'
    }
  },
  {
    data: {
      id: 'be',
      source: 'b',
      target: 'e'
    }
  }
], 
        style: [
  {
    selector: 'node[type="prot"]',
    style: {
      'shape': 'circle',
      'background-color': 'red',
      label: 'data(id)'
    }
  },
  {
    selector: 'node[type="met"]',
    style: {
      'shape': 'square',
      'background-color': 'blue',
      label: 'data(id)'
    }
  }]
      });
      cy.layout({
    name: 'circle',
    animate: true
}).run();
</script>
</body>
</html>

</html>

Ответ №1:

На самом деле, текущий код выглядит для меня нормально и выполняет свою работу.

Если вы хотите сделать div меньше, вы можете сделать вот так:

 #cy {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

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

Метки: