Фильтрация графа по связи с указанным c узлом в cytoscape. js - PullRequest
Новая
       5

Фильтрация графа по связи с указанным c узлом в cytoscape. js

1 голос
/ 27 января 2020

Новое в Cytoscape. У меня есть график с доминирующей основной сетью и некоторыми небольшими сетями, не связанными с основной, которую я хочу удалить. Просматривая документацию, я не вижу очевидного решения этого. Я предполагаю, что, возможно, необходим специальный подход, который проходит через все узлы, проверяет расстояние их графа от самого центрального узла в главном кластере, и если это расстояние не определено, удалите этот узел и все остальные, с которыми он соединяется. Но стремится получить управление от других с большим опытом работы с библиотекой. Любой совет высоко ценится. Я отмечаю этот без ответа, но связанный вопрос.

Вот пример графика. Хотя я не могу работать над jsfiddle , вот рабочая версия : 

<!DOCTYPE>
<html>
  <head>
    <title>cytoscape-dagre.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
    <script src="cytoscape-dagre.js"></script>

    <style>
      #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
      }
    </style>

    <script>
      window.addEventListener('DOMContentLoaded', function(){

        var cy = window.cy = cytoscape({
          container: document.getElementById('cy'),

          boxSelectionEnabled: false,
          autounselectify: true,

          layout: {
            name: 'dagre'
          },

          style: [
            {
              selector: 'node',
              style: {
                'background-color': '#11479e'
              }
            },

            {
              selector: 'edge',
              style: {
                'width': 4,
                'target-arrow-shape': 'triangle',
                'line-color': '#9dbaea',
                'target-arrow-color': '#9dbaea',
                'curve-style': 'bezier'
              }
            }
          ],

          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' } },
              { data: { id: 'n16' } }
            ],
            edges: [
              { data: { source: 'n0', target: 'n1' } },
              { data: { source: 'n1', target: 'n2' } },
              { data: { source: 'n1', target: 'n3' } },
              { 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: 'n11', target: 'n12' } },
              { data: { source: 'n12', target: 'n13' } },
              { data: { source: 'n13', target: 'n14' } },
              { data: { source: 'n13', target: 'n15' } },
            ]
          }
        });

      });
    </script>
  </head>

  <body>
    <h1>cytoscape-dagre demo</h1>

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

  </body>
</html>

1 Ответ

3 голосов
/ 27 января 2020

Вы можете сделать это с помощью методов фильтрации, предусмотренных в документах , если вы найдете какой-либо метод, более подходящий для этой проблемы, просто возитесь с ними, пока не получите правильный результат. Важной частью здесь является .union () и метод .not () . Вы можете использовать их для:

  • контролируемого обхода графа, сохранения важных узлов на пути
  • и последующей фильтрации коллекции в соответствии с вашими потребностями

Вы упомянули, что не можете заставить jsfiddle работать, вы можете проверить код ниже в здесь 

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

  style: [{
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        height: "60px",
        width: "60px",
        "border-color": "black",
        "border-opacity": "1",
        "border-width": "10px"
      }
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle"
      }
    }
  ],

  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"
        }
      },
      {
        data: {
          id: "n16"
        }
      }
    ],
    edges: [{
        data: {
          source: "n0",
          target: "n1"
        }
      },
      {
        data: {
          source: "n1",
          target: "n2"
        }
      },
      {
        data: {
          source: "n1",
          target: "n3"
        }
      },
      {
        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: "n11",
          target: "n12"
        }
      },
      {
        data: {
          source: "n12",
          target: "n13"
        }
      },
      {
        data: {
          source: "n13",
          target: "n14"
        }
      },
      {
        data: {
          source: "n13",
          target: "n15"
        }
      }
    ]
  },

  layout: {
    name: "dagre",
    padding: 5
  }
}));


cy.unbind('click')
cy.bind('click', 'node', function(event) {
  // .union() takes two collections and adds both together without duplicates
  var connected = event.target
  connected = connected.union(event.target.predecessors())
  connected = connected.union(connected.successors())
  // in one line: 
  // event.target.union(event.target.predecessors().union(event.target.successors()))

  // .not() filters out whatever is not specified in connected, e.g. every other node/edge not present in connected
  var notConnected = cy.elements().not(connected)

  // if you want, you can later add the saved elements again
  var saved = cy.remove(notConnected)
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}
<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
</head>

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

</html>
...