Vizceral動(dòng)態(tài)展示線路圖組件

Vizceral是一組采用WebG標(biāo)準(zhǔn)實(shí)現(xiàn)的動(dòng)態(tài)展示線路圖組件，可以實(shí)現(xiàn)數(shù)據(jù)的查看以及交互。分為全局、部分區(qū)域、水平三個(gè)維度，使數(shù)據(jù)更為直觀明了的展示。

此組件可以采取多個(gè)流量圖，并將生成一個(gè)“全局”圖，顯示所有傳入的流量到每個(gè)“區(qū)域”，支持跨區(qū)域通信。

使用：

如果使用 React 或者 web 組件，可參看以下兩個(gè)項(xiàng)目：

• React: http://www.oschina.net/p/vizceral-react

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

或者從零開(kāi)始：

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();