流动图神器vizceral

haoningabc

浏览: 1475913 次
性别:
来自: 北京

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

nginx javascript

把c的代码生成json：https://github.com/killinux/haobasic

发现个画流动图的神器：
https://github.com/Netflix/vizceral

es5的代码参考这个
https://www.diycode.cc/projects/Netflix/vizceral
还有react和Component 的插件：
React: http://www.oschina.net/p/vizceral-react

Web 组件: http://www.oschina.net/p/vizceral-component

代码如下：

<html>
  <head>
    <script src="node_modules/vizceral/dist/vizceral.js"></script>
    <script>
      function run () {
        var viz = new Vizceral.default(document.getElementById('vizceral'));
        viz.updateData({
          name: 'us-west-2',
          //name: 'us-east-1',
          renderer: 'global',
          maxVolume: 500,
          nodes: [
            {name: 'INTERNET'},
            {name: 'wahahahaha'},
            {name: 'hehe'}
          ],
          connections: [
            {
              source: 'INTERNET',
              target: 'wahahahaha',
              metrics: { normal: 100, warning: 95, danger: 5 },
              metadata: { streaming: true }
            },
            {
              source: 'INTERNET',
              target: 'hehe',
              metrics: { normal: 50, warning: 4, danger: 5 },
              metadata: { streaming: true }
            }
          ]
        });

        viz.setView();
        viz.animate();
      }
      
    </script>
    <title>Vanilla Vizceral Example with Sample Data</title>
  </head>
  <body onload='run()'>
    <canvas id='vizceral'></canvas>
  </body>
</html>

运行类似：

vim:
:w !sudo tee %

https://blog.csdn.net/zoumin123456/article/details/53435987

###### bower ######
bower init
生成 bower.json

bower uninstall jquery
总结：
准备工作
①安装node环境:node.js
②安装Git，bower从远程git仓库获取代码包
安装bower     npm install -g bower
bower初始化   bower init
包的安装      bower install jquery --save
包的信息      bower info jquery
包的更新      bower update
包的查找      bower search bootstrap
包的卸载      bower uninstall jquery

#########vizceral 用es5 #########

https://www.diycode.cc/projects/Netflix/vizceral

npm init

vim package.json

npm install vizceral --save

要使用的文件为
node_modules/vizceral/dist/vizceral.js

########### webpack
https://www.webpackjs.com/

npm install webpack webpack-dev-server webpack-cli -g

cat webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
  }
};

cat src/index.js

import bar from './bar';

bar();
 cat src/bar.js
export default function bar() {
  //
	console.log("this is a hello ,webpack");
}

cat package.json

{
  "name": "webpacktest1014",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"compile":"webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm run compile

npm run dev

localhost:8080

########### es6
不看这个https://www.runoob.com/w3cnote/es6-setup.html

看这个
https://www.jianshu.com/p/c3a6f2f56ed8

npm install babel-cli -g

npm init -yes
npm install babel-preset-es2015 --save-dev
vim test.es6

let myName = 'Gao';
let say = 'Hello ${myName} ';
console.log(say);

babel test.es6 --out-file js/test.js --presets es2015

package.json
的script里添加
,
"compile": "babel es6 --out-dir js --presets es2015"

npm run compile

################## es6的vizceral
git clone https://github.com/Netflix/vizceral-example
npm install
npm run dev

localhost:8080

#########

查看图片附件

分享到：

xl2tp转发 | gcc链接顺序

2019-10-12 19:04
浏览 505
评论(0)
分类:开源软件
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论