代码拉取完成，页面将自动刷新
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:
# install via yarn
yarn add netjsongraph.js --save
# or install via npm
npm install netjsongraph.js --save
netjsongraph.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 NetJSON NetworkGraph metadata or not, defaults to true
defaultStyle: whether to use the default style or not, defaults to true
scaleExtent: see d3 Zoom scaleExtent, defaults to [0.25, 5]
charge: see d3 Zoom charge, defaults to -130
linkDistance: see d3 Zoom linkDistance, defaults to 50,linkStrength: see d3 Zoom linkStrength, defaults to 0.2,friction: see d3 Zoom friction, defaults to 0.9
chargeDistance: see d3 Zoom chargeDistance, defaults to Infinity
theta: see d3 Zoom theta, defaults to 0.8
gravity: see d3 Zoom 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 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 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 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 needVery 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 the 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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
