`
haoningabc
  • 浏览: 1477894 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

流动图神器vizceral

阅读更多
把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


#########

  • 大小: 137 KB
  • 大小: 955.9 KB
分享到:
评论

相关推荐

    处理图片神器,只要一句代码就ok了,大小随你定

    这个"处理图片神器"可能是一款高效且易用的图片处理库或工具,它允许开发者通过简单的代码实现图片尺寸的自由调整,并支持多种图片格式。下面我们将详细探讨这个主题。 首先,图片处理通常涉及到图像的读取、编辑和...

    一键下载淘宝图片神器

    一款专门用来下载网店中商品图片的软件,目前的电商图片助手可以将京东、1688阿里、衣联网、一号店、易贝、拍拍、速卖通、淘宝、天猫、国际天猫...水印、智能拼接成长图、智能断点续传、智能过滤重复图片等等的人性化功能...

    图片墙神器制作海报神器

    【图片墙神器制作海报神器】是一款专为合成多张图片设计的工具,它能帮助用户快速、方便地将几十甚至几百张图片拼接成一张整体的图像,类似于微信群头像的展示方式,创造出富有创意的图片墙效果。这款软件特别适合于...

    地图下载神器

    "地图下载神器"是一款强大的地图和高程图下载工具,专为需要大量地图数据的用户设计。这款软件相比市面上常见的地图软件如水经注、全能地图等,具有更丰富的功能和更高的性能,使得用户在获取地理信息方面拥有更多...

    龙头复盘神器V4.93

    龙头复盘神器V4.93是一款专业的股票复盘工具,旨在帮助投资者深入了解股票市场的动态和趋势。该软件提供了丰富的功能和数据分析工具,使用户能够快速、准确地分析个股表现和市场走势。 通过龙头复盘神器V4.93,用户...

    图片墙神器 Collagelt 制作海报神器

    Collagelt,被誉为“图片墙神器”和“海报制作神器”,是一款专为用户解决图片拼接难题的高效工具。在日常生活中,无论是社交媒体分享、个人相册制作还是商业宣传,我们常常需要将多张图片拼接在一起,形成美观且有...

    【小程序源码】修复图片音频全新升级带特效神器小游戏微信小程序源码下载-多种游戏支持

    这是一款全新升级带特效神器小游戏微信小程序源码 小编发现很多喝酒神器小程序都不带特效和音效的 感觉差了那么一点意思而且感觉也不炫酷 ...好了也不和大家废话多说了,下面来看看小编的部分游戏演示图!

    ctf图片隐写神器Stegsolve

    包含Stegsolve.jar//需要安装java环境 在分析里面从上到下的依次意思是 File Format:文件格式 Data Extract:数据提取 Steregram Solve:立体试图 可以左右控制偏移 ...Image Combiner:拼图,图片拼接

    程序员表白神器 love-master

    程序员表白神器你值得拥有-程序员表白神器你值得拥有 程序员表白神器你值得拥有-程序员表白神器你值得拥有 程序员表白神器你值得拥有-程序员表白神器你值得拥有 程序员表白神器你值得拥有-程序员表白神器你值得拥有 ...

    c盘清理神器神器神器神器

    c盘清理神器神器神器神器

    搜索图神器APP

    搜索图神器APP 还不错 可以使用,亲测 /

    Android应用源码之android gif模式和图片展现模式 图片展现神器

    4. ** Fresco** 和 **Picasso**: 这两个是强大的图片加载库,它们不仅支持多种图片格式,还提供了缓存策略、图片占位符、错误图等功能,能有效优化图片加载性能和用户体验。 5. ** Glide with GIF support**: 除了...

    Android加载/处理超大图片神器

    Android在加载或者处理超大巨型图片(x MB量级起步的图片)是一件非常需要小心谨慎的活儿,除了常规的OOM,其他需要处理的细节地方还很多,幸好开源社区github贡献了一套神器:SubsamplingScaleImageView...

    小图像无损放大神器

    这种技术对于旧照片的修复、小尺寸图片的放大以及需要高质量打印的需求尤其有价值。PhotoZoom Pro 可能采用了Super-Resolution技术,这是一种通过分析图像模式和结构,创建出比原始图像更详细信息的方法,从而实现...

    追书小说神器,微信小程序,内置API

    【追书小说神器,微信小程序,内置API】是一款专为小说爱好者打造的微信小程序应用,其设计理念在于提供便捷、高效的小说阅读体验。这款小程序利用内置的API接口,能够实现快速检索、更新和流畅阅读各类网络小说资源...

    A刷机帮IMEI神器账户版.rar

    刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮串号修复神器账户版刷机帮...

    本址搜索神器

    【本址搜索神器】是一种强大的在线搜索引擎工具,它专门针对特定网址或网站进行深度和全面的搜索。在互联网信息爆炸的时代,找到一个网站内部的特定信息可能会变得非常困难,尤其是在大型论坛、知识库或者博客平台中...

    作业神器 V0.5.4

    作业神器 版本:0.5.4 文件大小:6.93MB 适用固件:Android2.2及以上 分享者:魔方格 魔方格作业神器是一款适合中小学生学习做作业交流的安卓APP,这款软件功能强大,支持在线交流学习!喜欢的童鞋赶紧来下载吧!...

    免费版淘宝装修神器

    淘宝装修神器是一款专为淘宝店主设计的店铺装饰工具,它集成了多种热门特效模块,旨在帮助用户轻松打造出个性化且吸引眼球的店铺界面。这款软件的一大亮点在于其全功能免费,无需用户支付任何费用就能享受到全部服务...

Global site tag (gtag.js) - Google Analytics