zoukankan      html  css  js  c++  java
  • 全部代码,轻松制作星空图(关系图),采用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

  • 相关阅读:
    连续最大和
    买苹果(找规律)
    最大的奇约数(找规律化简)
    暗黑字符串(递推)
    虚拟机无法通过桥接上网
    使用SQLServer 2012修改表
    使用SQL Server 2012创建表
    使用SQL Server 2012创建和删除数据库
    SQL Server 2012安装
    关系型数据模型
  • 原文地址:https://www.cnblogs.com/smartisn/p/15186091.html
Copyright © 2011-2022 走看看