npm-test-publish-netjsondemo

v1.0.0

Published

3 years ago

a demo designed for refactoring the netjsongraph

Downloads

0High
0Medium
0Low

kutugu

netjson network data visualization

NetJSON Demo

Download NPM

Demo roughly reproduces the basic functions of the code base -- netjsongraph.js using EchartsJS and LeafletJS. In addition, with the built-in features of the Echarts library, some small features have been added.

Install

npm install
npm run start

npm run build

Arguments

netjsongraph.js accepts two arguments.

url (required, string): URL to fetch the JSON data from
options (optional, object): custom options described below
- el: container element, defaults to "body"
- metadata: whether to show NetJSON NetworkGraph metadata or not, defaults to true
- defaultStyle: whether to use the default style or not, defaults to true
- svgRender: switch to Svg mode render?
- listenUpdateUrl: listen the url to update JSONData.
- scaleExtent: see d3 Zoom scaleExtent, defaults to [0.25, 5]
- dateRegular: analyze date format.The exec result must be [date, year, month, day, hour, minute, second, millisecond?]
- gravity: see d3 Zoom gravity, defaults to 0.1
- edgeLength: the distance between the two nodes on the side, this distance will also be affected by repulsion
- repulsion: the repulsion factor between nodes.
- circleRadius: the radius of circles (nodes) in pixel
- labelDx: node labels offsetX(distance on x axis) in graph.
- labelDy: node labels offsetY(distance on y axis) in graph.
- 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
- 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
- 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

Real Time Update

Since there isn't a real server for interaction, I only wrote one example for test. I built a simple local server using the express framework and nodeJS. After a period of time, the JSON change event is triggered, and the data view in the demo is also changed.

The code to build a local server can be found here.

Execute in this directory：

npm install

node index.js

Then open the demo page, you will find that the nodes and links in the view change after 5 seconds.

This is just a demo, you can also customize other events to trigger data changes.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <title>netjsongraph.js: basic example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin=""/>
    <!-- theme can be easily customized via css -->
    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
    <link href="../src/css/netjsongraph.css" rel="stylesheet">
    <link href="../lib/leaflet-draw.css" rel="stylesheet">
</head>
<body>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
    crossorigin=""></script>
    <script src="../lib/leaflet-mapDownload.js"></script>
    <script src="../lib/leaflet-draw.js"></script>
    <script type="text/javascript" src="../lib/echarts.min.js"></script>
    <script type="text/javascript" src="../lib/socket.io.js"></script>
    <script type="text/javascript" src="../src/js/netjsongraph.js"></script>
    <script type="text/javascript">
        echarts.netGraphChart("../src/data/netjson.json");
    </script>
</body>
</html>

introduce video

Different Demos

NetJSON base Demo

NetJSON sigmaJS version Demo

NetJSON bigData Demo

NetJSON sigma-bigData Demo

NetJSON multiple interfaces Demo

How to migrate the previous version

Because of the different libraries used, some of the parameters of the previous version may disappear, especially some of the parameters of the Force map algorithm.But you don't have to delete them, it doesn't have a negative impact.

These parameters have been removed for this demo：

animationAtStart: true
charge: -130,
linkStrength: 0.2,
friction: 0.9, // d3 default
chargeDistance: Infinity, // d3 default
theta: 0.8, // d3 default

If you want to update the data in real time, you only need to listen to a port number on the server, passing in the url as the parameter -- listenUpdateUrl. Of course you have to customize the trigger event -- "netjsonChange".

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme