Leverage the power of d3.js to visualize network topology using the NetJSON 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
- dark green example
- light green example
- custom attributes example
- NetJSON NetworkCollection example
- callbacks example
# install via yarn
yarn add netjsongraph.js --save
# or install via npm
npm install netjsongraph.js --savenetjsongraph.js accepts two arguments
url(required, string): URL to fetch the JSON data fromoptions(optional, object): custom options described belowel: container element, defaults to"body"metadata: whether to show NetJSONNetworkGraphmetadata or not, defaults totruedefaultStyle: whether to use the default style or not, defaults totruescaleExtent: see d3 Zoom scaleExtent, defaults to[0.25, 5]charge: see d3 Zoom charge, defaults to-130linkDistance: see d3 Zoom linkDistance, defaults to50,linkStrength: see d3 Zoom linkStrength, defaults to0.2,friction: see d3 Zoom friction, defaults to0.9chargeDistance: see d3 Zoom chargeDistance, defaults toInfinitytheta: see d3 Zoom theta, defaults to0.8gravity: see d3 Zoom gravity, defaults to0.1nodeClassProperty: if specified, nodes will have an additional CSS class that depends on the value of a specific NetJSON node propertylinkClassProperty: if specified, links will have an additional CSS class that depends on the value of a specific NetJSON link propertycircleRadius: radius of circles (nodes) in pixel, defalts to8labelDx: SVG dx (distance on x axis) attribute of node labels in graph0labelDy: SVG dy (distance on y axis) attribute of node labels in graph-1.3emonInit: callback function executed on initialization, params:urlandoptionsonLoad: callback function executed after data has been loaded, params:urlandoptionsonEnd: callback function executed when initial animation is complete, params:urlandoptionslinkDistanceFunc: by default high density areas have longer links, you can tweak this behaviour if you needredraw: function called when panning and zooming, you can tweak it if you needprepareData: function used to convert NetJSON NetworkGraph to the javascript data structured used internally, you won't need to modify it in most casesonClickNode: function called when a node is clicked, you can customize it if you needonClickLink: function called when a link is clicked, you can customize it if you need
Very basic:
<!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 graph in a container:
<!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>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:
<!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>- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request :D
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent