全部代码，轻松制作星空图（关系图），采用pm

官网文档：https://github.com/anvaka/pm

效果上图：

 

数据制作：

 1 var mysql  = require('mysql');
 2 var connection = mysql.createConnection({
 3     host     : 'localhost',
 4     user     : 'root',
 5     password : 'password',
 6     port: '3306',
 7     database: 'nufix'
 8 });
 9 connection.connect();
10 var  sql = 'select * from dependency_info';
11 connection.query(sql,function (err, results) {
12     if(err){
13         console.log('[SELECT ERROR] - ',err.message);
14         return;
15     }
16 
17     if(results)
18     {
19         var createGraph = require('ngraph.graph');
20         var graph = createGraph();
21         for(var i = 0; i < results.length; i++)
22         {
23             //如果依赖项requirement为空项，那么就说明是单独的节点，只需要添加就完事了，不需要再调用addNode方法了
24             if(results[i].dependency!=='')
25                 graph.addLink(results[i].project_name,results[i].dependency);
26             else
27                 graph.addNode(results[i].project_name);
28         }
29         //计算布局，生成position.bin文件
30         var createLayout = require('ngraph.offline.layout');
31         var layout = createLayout(graph, {
32             iterations: 100, // Run `100` iterations only
33             saveEach: 10, // Save each `10th` iteration
34             outDir: './Data/myFolder', // Save results into `./myFolder`
35             layout: require('ngraph.forcelayout3d') // use custom layouter
36         });
37         layout.run();
38         //生成二进制文件links.bin以及labels.json
39         var save = require('ngraph.tobinary');
40         save(graph, {
41             outDir: './Data', // folder where to save results. '.' by default
42             labels: 'labels.json', // name of the labels file. labels.json by default
43             meta: 'meta.json', // name of the file with meta information. meta.json by default
44             links: 'links.bin' // file name for links array. links.bin by default
45         });
46     }
47 });
48 connection.end();
数据布局制作

网页：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 5   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6   <title>Code Galaxies Visualization</title>
 7   <meta name="Description" content="Code galaxies visualization allows you to explore huge graphs of software package managers (npm, go, ruby gems, composer, etc.)">
 8   <meta name="keywords" content="visualization, npm visualization, bower visualization, composer visualization, ruby gems visualization, go visualization, github visualization" />
 9   <meta name="author" content="Andrei Kashcha">
10   <meta name="title" content="Code Galaxies Visualization" />
11   <link href='//fonts.googleapis.com/css?family=PT+Sans|Roboto' rel='stylesheet' type='text/css'>
12   <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">
13   <meta property="og:image" content="http://raw.githubusercontent.com/wiki/anvaka/pm/images/nuget_fly_first.png" />
14   <meta property="og:image:secure_url" content="https://raw.githubusercontent.com/wiki/anvaka/pm/images/nuget_fly_first.png" />
15   <meta property="og:image:width" content="300px" />
16   <meta property="og:image:height" content="187px" />
17 </head>
18 <body>
19   <div id=app></div>
20   <script src="app.js"></script>
21 <script>
22   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
23   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
24   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
25   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
26   ga('create', 'UA-47259320-1', 'anvaka.github.io');
27   ga('send', 'pageview');
28 </script>
29 </body>
30 </html>
网页

功能js

链接：https://pan.baidu.com/s/1TodRcQZta5DkJFfQQVQXgQ
提取码：rgem

 

posted @ 2021-08-25 17:20  博二爷  阅读(552)  评论(0)  编辑  收藏  举报