Vizceral是一组采用WebG标准实现的动态展示线路图组件,可以实现数据的查看以及交互。分为全局、部分区域、水平三个维度,使数据更为直观明了的展示。
此组件可以采取多个流量图,并将生成一个“全局”图,显示所有传入的流量到每个“区域”,支持跨区域通信。
使用:
如果使用 React 或者 web 组件,可参看以下两个项目:
React: http://www.oschina.net/p/vizceral-react
Web 组件: http://www.oschina.net/p/vizceral-component
或者从零开始:
npm install vizceral --save import Vizceral from 'vizceral'; const viz = new Vizceral(); // Add event handlers for the vizceral events viz.on('viewChanged', view => {}); viz.on('nodeHighlighted', node => {}); viz.on('rendered', data => {}); viz.on('nodeContextSizeChanged', dimensions => {}); // Sample data viz.updateData({ name: 'us-west-2', renderer: 'global', nodes: [ {name: 'INTERNET'}, {name: 'service'} ], connections: [ { source: 'INTERNET', target: 'service', metrics: { normal: 100, warning: 95, danger: 5 }, metadata: { streaming: true } } ] }); viz.setView(); viz.animate();