neo4jd3-graph

neo4jd3-graph

The "neo4jd3-graph" npm package is a tool designed for visualizing Neo4j graph data. This package utilizes the power of D3.js (version 4.2.1) for rendering interactive and dynamic graphs representing relationships within Neo4j databases. The visualization is enhanced with Font Awesome icons (version 4.7.0) to provide a rich and aesthetically pleasing representation.

Authors

• @Reddy Bala Subrahmanyam

Installation

Install with npm

  npm i neo4jd3-graph

Usage/Example

• Import the necessary components and styles in your React application:

js or ts

import React, { useEffect } from 'react';
import { Neo4jGraph, CreateGraphInterface } from 'neo4jd3-graph';
import './App.css';

• Define your Neo4j graph data. The data should follow the format specified in the Neo4j response:

Neo4j data format

{
    "results": [
        {
            "columns": ["user", "entity"],
            "data": [
                {
                    "graph": {
                        "nodes": [
                            {
                                "id": "1",
                                "labels": ["User"],
                                "properties": {
                                    "userId": "eisman"
                                }
                            },
                            {
                                "id": "8",
                                "labels": ["Project"],
                                "properties": {
                                    "name": "neo4jd3",
                                    "title": "neo4jd3.js",
                                    "description": "Neo4j graph visualization using D3.js.",
                                    "url": "https://eisman.github.io/neo4jd3"
                                }
                            }
                        ],
                        "relationships": [
                            {
                                "id": "7",
                                "type": "DEVELOPES",
                                "startNode": "1",
                                "endNode": "8",
                                "properties": {
                                    "from": 1470002400000
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "errors": []
}

• Create a React functional component and use the Neo4jGraph component:

function App() {
  const { renderGraph } = Neo4jGraph();

  useEffect(() => {
    const graphConfig: CreateGraphInterface = {
      parentElement: "#canva",
      options: {
        neo4jData: data as any,
        nodeRadius: 25,
        onNodeClick(d) {
          console.log("Node clicked:", d);
        },
        colors: ["red"],
        onRelationshipDoubleClick(d) {
          console.log("Relationship double-clicked:", d);
        },
        infoPanel: true,
        showIcons: true,
        zoomFit: true
      }
    };
    renderGraph(graphConfig);
  }, []);

  return (
    <div className="App">
      <div id="canva"></div>
    </div>
  );
}

export default App;

• Customize the graphConfig object with the desired options for your graph visualization.
• Run your React application, and the Neo4j graph visualization should be displayed in the specified HTML element.

Options

Parameter	Type	Description
highlight	array	Highlight several nodes of the graph. Example: [     {         class: 'Project',         property: 'name',         value: 'neo4jd3'     } ]
icons	object	Map node labels to Font Awesome icons. Example: {     'BirthDate': 'birthday-cake',     'Password': 'lock',     'Phone': 'phone',     'User': 'user' }.
images	object	Map node labels to SVG images (e.g. using Twitter Emoji). Example: {     'Address': 'img/twemoji/1f3e0.svg',     'BirthDate': 'img/twemoji/1f382.svg',     'Password': 'img/twemoji/1f511.svg',     'Project': 'img/twemoji/2198.svg',     'Project|name|neo4jd3': 'img/twemoji/2196.svg',     'User': 'img/twemoji/1f600.svg' }.
infoPanel	boolean	Show the information panel: true, false. Default: true.
minCollision	int	Minimum distance between nodes. Default: 2 * nodeRadius.
neo4jData	object	Graph data in Neo4j data format.
neo4jDataUrl	string	URL of the endpoint that serves the graph data in Neo4j data format.
nodeRadius	int	Radius of nodes. Default: 25.
onNodeClick	function	Callback function to be executed when the user clicks a node.
onNodeDoubleClick	function	Callback function to be executed when the user double clicks a node.
onNodeDragEnd	function	Callback function to be executed when the user finishes dragging a node.
onNodeDragStart	function	Callback function to be executed when the user starts dragging a node.
onNodeMouseEnter	function	Callback function to be executed when the mouse enters a node.
onNodeMouseLeave	function	Callback function to be executed when the mouse leaves a node.
onRelationshipDoubleClick	function	Callback function to be executed when the user double clicks a relationship.
zoomFit	boolean	Adjust the graph to the container once it has been loaded: true, false. Default: false.

License

MIT

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.