Интеграция графа Neo4j во внешний интерфейс

Neo4j — это популярная графовая база данных, которая используется для хранения и запроса сложных взаимосвязей между данными. Одним из преимуществ использования графовой базы данных является возможность визуализировать данные в виде графика, что может быть полезно для понимания и анализа взаимосвязей между различными точками данных.

В этом уроке мы узнаем, как интегрировать график Neo4j во внешний интерфейс веб-приложения. Мы будем использовать браузер Neo4j для создания простого графика, а затем использовать библиотеку визуализации графиков Neo4j для отображения графика на веб-странице.

Предпосылки

Прежде чем мы начнем, убедитесь, что в вашей системе установлено следующее:

• Нео4дж
• Веб-браузер

Вы можете загрузить и установить Neo4j из Центра загрузки Neo4j.

Создание графика

Во-первых, нам нужно создать график в Neo4j. Откройте браузер Neo4j и создайте несколько узлов и отношений, используя запросы Cypher. Например:

CREATE (:Person {name: 'Alice'})
CREATE (:Person {name: 'Bob'})
CREATE (:Person {name: 'Eve'})

CREATE (alice:Person {name: 'Alice'})-[:FRIEND]->(bob:Person {name: 'Bob'})
CREATE (alice:Person {name: 'Alice'})-[:FRIEND]->(eve:Person {name: 'Eve'})

Это создает три узла с меткой Person и две связи между ними с меткой FRIEND.

Отображение графика

Для отображения графика на веб-странице воспользуемся библиотекой Neo4j Graph Visualization. Эта библиотека представляет собой библиотеку JavaScript, которая позволяет легко отображать графики Neo4j в веб-приложениях.

Чтобы использовать библиотеку, включите следующий скрипт в элемент head вашей HTML-страницы:

<script src="https://unpkg.com/[email protected]/dist/neo4j-graph-viz.js"></script>

Затем создайте элемент div в теле HTML-страницы, где вы хотите отобразить график. Дайте элементу идентификатор, чтобы вы могли ссылаться на него в своем коде JavaScript.

<div id="graph"></div>

Затем создайте функцию JavaScript для отображения графика. В этой функции мы будем использовать функцию neo4jGraphViz из библиотеки визуализации графиков Neo4j для создания новой визуализации графика. Затем мы будем использовать метод визуализации render для отображения графика в элементе div.

function displayGraph() {
  const viz = neo4jGraphViz({
    containerId: 'graph',
    driverUri: 'bolt://localhost:7687',
    username: 'neo4j',
    password: 'password'
  })
  viz.render({
    query: 'MATCH (n)-[r]-(m) RETURN n,r,m'
  })
}

Заключение

В этом руководстве мы узнали, как интегрировать график Neo4j во внешний интерфейс веб-приложения с помощью библиотеки визуализации Neo4j Graph. Мы увидели, как создать простой график в Neo4j и как использовать библиотеку для отображения графика на веб-странице. Обладая этими навыками, вы можете начать создавать веб-приложения, которые визуализируют данные из графиков Neo4j, позволяя пользователям легко понимать и анализировать сложные отношения между точками данных.