D3neo4j.js NPM

d3neo4j.js

Neo4j graph visualization using D3.js.

neo3jd3.js

Running

> git clone https://github.com/zeus1999/neo4jd3.git
> npm install

Documentation

Options

Parameter	Type	Description
highlight	array	Highlight several nodes of the graph. Selection with Node Id.Example:`[` `{` `id: 'Pet-001'` `}]`
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`.
showNodeLabel	boolean	Show the node labels: `true`, `false`. Default: `false`.
nodeLabelFunction	function	Show the node labels: `true`, `false`. Default: `false`. Examples:`node => node.namenode => node.idnode => node.id + " " + node.name`

Documentation

Example Data

{
    "results": [
        {
            "columns": [
                "user",
                "entity"
            ],
            "data": [
                {
                    "graph": {
                        "nodes": [
                            {
                                "id": "1001",
                                "name": "Anna Schmidt",
                                "labels": ["Person"],
                                "properties": {}
                            },
                            {
                                "id": "1002",
                                "name": "Ben Müller",
                                "labels": ["Person"],
                                "properties": {}
                            },
                            {
                                "id": "1003",
                                "name": "Clara Weber",
                                "labels": ["Person"],
                                "properties": {}
                            },
                            {
                                "id": "1004",
                                "name": "David Fischer",
                                "labels": ["Person"],
                                "properties": {}
                            },
                            {
                                "id": "2001",
                                "name": "TechCorp GmbH",
                                "labels": ["Unternehmen"],
                                "properties": {}
                            }
                        ],
                        "relationships": [
                            {
                                "id": "R100",
                                "type": "Freund",
                                "startNode": "1001",
                                "endNode": "1002",
                                "properties": {}
                            },
                            {
                                "id": "R101",
                                "type": "Arbeitskollege",
                                "startNode": "1002",
                                "endNode": "1003",
                                "properties": {}
                            },
                            {
                                "id": "R102",
                                "type": "Angestellter",
                                "startNode": "1003",
                                "endNode": "2001",
                                "properties": {}
                            },
                            {
                                "id": "R103",
                                "type": "Chef",
                                "startNode": "1004",
                                "endNode": "2001",
                                "properties": {}
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "errors": []
}

Example

new d3Neo4J('#neo4jd3', {
    highlight: [
        {
            id: "1004"
        }
    ],
    neo4jData: graphData,
    infoPanel: false,
    minCollision: 100,
    nodeRadius: 25,
    showNodeLabel: true,
    nodeLabelFunction: node => node.name
});

Versions

Tested in D3 Version 7.9.0

License

Code released under the MIT license.

4 months ago

4 months ago

4 months ago