0

netjsongraph.js

NetJSON NetworkGraph visualizer based on d3.js

Official Site
Github repo
Main metrics

Github stars Tracking Chart

netjsongraph.js

.. image:: https://raw.githubusercontent.com/interop-dev/netjsongraph.js/master/docs/netjsongraph-default.png

Leverage the power of d3.js <http://d3js.org/>__ to visualize network topology using the
NetJSON <http://netjson.org>__ NetworkGraph format.

Build powerful and interoperable visualizations without losing flexibility!

This library is still in early stages, feedback and contributions are very welcome.

Examples:

  • default style <https://nodeshot.org/netjsongraph/examples/index.html>__
  • dark green example <https://nodeshot.org/netjsongraph/examples/dark.html>__
  • light green example <https://nodeshot.org/netjsongraph/examples/green.html>__
  • custom attributes example <https://nodeshot.org/netjsongraph/examples/custom-attributes.html>__
  • NetJSON NetworkCollection example <https://nodeshot.org/netjsongraph/examples/network-collection.html>__
  • callbacks example <https://nodeshot.org/netjsongraph/examples/callbacks.html>__

Install

.. code-block:: bash

# install via yarn
yarn add netjsongraph.js --save

# or install via npm
npm install netjsongraph.js --save

Arguments

netjsongraph.js accepts two arguments:

  1. url (required, string): URL to fetch the JSON data from
  2. options (optional, object): custom options described below
    • el: container element, defaults to "body"
    • metadata: whether to show NetJSON <http://netjson.org>__ NetworkGraph metadata or not, defaults to true
    • defaultStyle: whether to use the default style or not, defaults to true
    • scaleExtent: see d3 Zoom scaleExtent <https://github.com/mbostock/d3/wiki/Zoom-Behavior#scaleExtent>__, defaults to [0.25, 5]
    • charge: see d3 Zoom charge <https://github.com/mbostock/d3/wiki/Force-Layout#charge>__, defaults to -130
    • linkDistance: see d3 Zoom linkDistance <https://github.com/mbostock/d3/wiki/Force-Layout#linkDistance>__, defaults to 50,
    • linkStrength: see d3 Zoom linkStrength <https://github.com/mbostock/d3/wiki/Force-Layout#linkStrength>__, defaults to 0.2,
    • friction: see d3 Zoom friction <https://github.com/mbostock/d3/wiki/Force-Layout#friction>__, defaults to 0.9
    • chargeDistance: see d3 Zoom chargeDistance <https://github.com/mbostock/d3/wiki/Force-Layout#chargeDistance>__, defaults to Infinity
    • theta: see d3 Zoom theta <https://github.com/mbostock/d3/wiki/Force-Layout#theta>__, defaults to 0.8
    • gravity: see d3 Zoom gravity <https://github.com/mbostock/d3/wiki/Force-Layout#gravity>__, defaults to 0.1
    • nodeClassProperty: if specified, nodes will have an additional CSS class that depends on the value of a specific NetJSON node property
    • linkClassProperty: if specified, links will have an additional CSS class that depends on the value of a specific NetJSON link property
    • circleRadius: radius of circles (nodes) in pixel, defalts to 8
    • labelDx: SVG dx (distance on x axis) attribute of node labels in graph 0
    • labelDy: SVG dy (distance on y axis) attribute of node labels in graph -1.3em
    • onInit: callback function executed on initialization, params: url and options
    • onLoad: callback function executed after data has been loaded, params: url and options
    • onEnd: callback function executed when initial animation is complete, params: url and options
    • linkDistanceFunc: by default high density areas have longer links, you can tweak this behaviour if you need
    • redraw: function called when panning and zooming, you can tweak it if you need
    • prepareData: function used to convert NetJSON NetworkGraph to the javascript data structured used internally, you won't need to modify it in most cases
    • onClickNode: function called when a node is clicked, you can customize it if you need
    • onClickLink: function called when a link is clicked, you can customize it if you need

Example Usage

Very basic:

.. code-block:: html

<!DOCTYPE html>
<html>
    <head>
        <link href="src/netjsongraph.css" rel="stylesheet">
        <!-- theme can be easily customized via css -->
        <link href="src/netjsongraph-theme.css" rel="stylesheet">
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="src/netjsongraph.js"></script>
        <script>d3.netJsonGraph("netjson.json");</script>
    </body>
</html>

Show the graph in a container:

.. code-block:: html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="src/netjsongraph.css" rel="stylesheet">
    <!-- theme can be easily customized via css -->
    <link href="src/netjsongraph-theme.css" rel="stylesheet">
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            font-size: 13px;
        }

        #network-graph{
            width: 1000px;
            height: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="network-graph"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="src/netjsongraph.js"></script>
    <script>
        d3.netJsonGraph("netjson.json", {
            el: "#network-graph"
        });
    </script>
</body>
</html>

Styling

The library comes with a default theme and a default style (color) for nodes,
you can disable this by passing the option
defaultStyle: false and define your own CSS rules.

Here's a fulle example of how to show green links and dark green nodes:

.. code-block:: html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="src/netjsongraph.css" rel="stylesheet">
    <!-- custom theme example -->
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            font-size: 13px;
        }

        .njg-overlay{
            width: auto;
            height: auto;
            min-width: 200px;
            max-width: 400px;
            border: 1px solid #000;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.7);
            top: 10px;
            right: 10px;
            padding: 0 15px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #fff
        }

        .njg-node {
            fill: #008000;
            fill-opacity: 0.8;
            stroke: #008000;
            stroke-width: 1px;
            cursor: pointer;
        }
        .njg-node:hover,
        .njg-node.njg-open{
            fill-opacity: 1;
        }

        .njg-link {
            stroke: #00ff00;
            stroke-width: 2;
            stroke-opacity: .5;
            cursor: pointer;
        }
        .njg-link:hover,
        .njg-link.njg-open{
            stroke-width: 3;
            stroke-opacity: 1
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
    <script src="src/netjsongraph.js"></script>
    <script>d3.netJsonGraph("netjson.json", { defaultStyle: false });</script>
</body>
</html>

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

BSD 3-Clause License <https://github.com/interop-dev/netjsongraph.js/blob/master/LICENSE>__.

Main metrics

Overview
Name With Owneropenwisp/netjsongraph.js
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 4)
Platform
License:BSD 3-Clause "New" or "Revised" License
所有者活动
Created At2015-08-13 16:42:02
Pushed At2025-06-02 23:46:15
Last Commit At2025-06-02 23:18:29
Release Count4
Last Release Name0.2.0 (Posted on 2024-12-04 17:48:05)
First Release Name0.1 (Posted on 2015-08-14 17:10:59)
用户参与
Stargazers Count276
Watchers Count21
Fork Count93
Commits Count401
Has Issues Enabled
Issues Count111
Issue Open Count9
Pull Requests Count179
Pull Requests Open Count4
Pull Requests Close Count85
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private