neo4jd3.js

This is a fork of the following package: https://github.com/eisman/neo4jd3.

Neo4j graph visualization using D3.js.

Features

• Compaptible with the Neo4j data format and the D3.js data format.
• Force simulation.
• Info panel that shows nodes and relationships information on hover.
• Double click callbacks.
• Custom node colors by node type.
• Sticky nodes (drag to stick, single click to unstick).
• Dynamic graph update (e.g. double click a node to expand it).
• Highlight nodes on init.
• Relationship auto-orientation.
• Zoom, pan, auto fit.
• Compatible with D3.js v4.

Running

First of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.

npm add @vanessapr85/neo4jd3

Documentation

import * as d3 from 'd3';
import '@vanessapr85/neo4jd3/dist/neo4jd3.min.css';
import Neo4jd3 from '@vanessapr85/neo4jd3';

const neo4jd3 = new Neo4jd3('.selector', options);

Options

| Parameter | Type | Description | | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | highlight | array | Highlight several nodes of the graph.Example:[    {        class: 'Project',        property: 'name',        value: 'neo4jd3'    }] | | 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. |

JavaScript API

| Function | Description | | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | appendRandomDataToNode(d, maxNodesToGenerate) | Generates between 1 and maxNodesToGenerate random nodes connected to node d and updates the graph data. | | neo4jDataToD3Data(data) | Converts data from Neo4j data format to D3.js data format. | | randomD3Data(d, maxNodesToGenerate) | Generates between 1 and maxNodesToGenerate random nodes connected to node d. | | size() | Returns the number of nodes and relationships.Example:{    nodes: 25,    relationships: 50} | | updateWithD3Data(d3Data) | Updates the graph data using the D3.js data format. | | updateWithNeo4jData(neo4jData) | Updates the graph data using the Neo4j data format. | | version() | Returns the version of neo4jd3.js.Example: '0.0.1' |

Documentation

D3.js data format

{
    "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
            },
            "source": "1",
            "target": "8",
            "linknum": 1
        }
    ]
}

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": []
}

Example

Live example @ https://eisman.github.io/neo4jd3/

var neo4jd3 = new Neo4jd3("#neo4jd3", {
  highlight: [
    {
      class: "Project",
      property: "name",
      value: "neo4jd3"
    },
    {
      class: "User",
      property: "userId",
      value: "eisman"
    }
  ],
  minCollision: 60,
  neo4jDataUrl: "json/neo4jData.json",
  nodeRadius: 25,
  onNodeDoubleClick: function(nodeSvg, node, event) {
    console.info('clic on node: [%s]', node.id);
  },
  zoomFit: true
});

What's coming?

• Toolbar.
• More than one relationship between two nodes.
• Markers.
• Performance optimization.
• Testing.

Copyright and license

Code and documentation copyright 2016 the author. Code released under the MIT license. Docs released under Creative Commons.