vizceral-example的例子 博客分类： javascript javascript

自定义图和加载结构

代码在
https://github.com/killinux/vizceral-example

vizceral-example/sample_data_chat.json

{
  "renderer": "region", "name": "test",
  "maxVolume": 100.0,
  "nodes": [
    {
          "renderer": "region",
          "name": "main",
          "maxVolume": 100.0 ,
          "displayName": "点外卖"
    },
	{
          "renderer": "region",
          "name": "findShop",
          "maxVolume": 100.0 ,
          "displayName": "找商店"
    },
    {
          "renderer": "region",
          "name": "findGoods",
          "maxVolume": 100.0,
          "displayName": "找商品"
    },
    {
          "renderer": "region",
          "name": "out",
          "maxVolume": 100.0,
          "displayName": "没找到你要的哟"
    },
    {
          "renderer": "region",
          "name": "getIt",
          "maxVolume": 100.0,
          "displayName": "找到喽，您要的是 $shop 的 $goods"
    }
  ],
  "connections": [
    {
          "source": "main",
          "target": "findShop",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
	{
          "source": "main",
          "target": "findGoods",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
	{
          "source": "findGoods",
          "target": "findShop",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
	{
          "source": "findShop",
          "target": "findGoods",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
    {
          "source": "findShop",
          "target": "out",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
    {
          "source": "findGoods",
          "target": "out",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
    {
          "source": "findShop",
          "target": "getIt",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    },
    {
          "source": "findGoods",
          "target": "getIt",
          "metrics": {
            "danger": 1,
            "normal": 10.0,
            "warning": 1.0
          }
    }
  ]
}

vizceral-example/src/components/trafficFlow.jsx
修改155行

 beginSampleData () {
    this.traffic = { nodes: [], connections: [] };
    //    request.get('sample_data.json')
    // modify by hao
    request.get('sample_data_chat.json')
      .set('Accept', 'application/json')
      .end((err, res) => {
        if (res && res.status === 200) {
          this.traffic.clientUpdateTime = Date.now();
          this.updateData(res.body);
        }
      });
  }