# topology-zrender

**Repository Path**: 0ldm0s/topology-zrender

## Basic Information

- **Project Name**: topology-zrender
- **Description**: 基于 Web 的逻辑拓扑图渲染，基于 zrender 开发
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2018-07-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# topology-zrender v1.0

### 示例

> 直接用浏览器打开index.html，使用前需要运行`bower install`加载依赖

### 使用

> 当前版本依赖zrender@2.1.0，lodash@4.17.10，并使用bower管理

**注：npm下面的zrender对应的是3.0版本，lodash是fp版，所以建议使用bower管理**

```
#加载zrender
bower i -save zrender@2.1.0

#加载lodash
bower i -save lodash@4.17.10
```

> 项目中加载

```
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/lodash/dist/lodash.min.js"></script>
  <script src="bower_components/zrender/build/r.js"></script>
  <script src="bower_components/zrender/build/zrender.js"></script>
  <script src="src/topology-zrender.js"></script>
```


> 项目中使用

```

<div id="topologyGraph" style="width: 100%;height: 100%"></div>

<script>
require(['topology', 'topology-tools'], function(topology, topologyTools) {
  var graph = topology.init(document.getElementById('topologyGraph'));
  getData().then(function(dataList) {

    var options = {
      data: dataList,
      dataId: 'dataId', //default: 'id'
      dataPId: 'dataPId', //default: 'pId'
      dataTitle: function(data) {   //default: 'title'
        return data.name + '(' + data.version + ')'
      },
      dataText: function(data) { //default: 'text'
        return data.name.length > 10 ? data.name.substr(0, 8) + '...' + '(' + data.version + ')' : data.name + '(' + data.version + ')'
      },
      group: [{
        mark: 'status',   //data 中的分组属性
        value: '0',       //data 中的分组值
        style: {
          node: {
            bgColor: '#2392f7',
            textColor: '#fff'
          }
        }
      }, {
        mark: 'status',
        value: '1',
        style: {
          node: {
            bgColor: '#e74c3c',  //default: style.node.bgColor
            textColor: '#fff'    //default: style.node.textColor
          }
        }
      }],
      style: {
        drawingBoard: {
          width: $('#topologyGraph').width()
        },
        node: {
          bgColor: '#a5b9cc',  //default: '#a5b9cc'
          textColor: '#fff',   //default: '#fff'
          width: 120,          //default: 120
          height: 25           //default: 25
        }
      }
    };
    var nodeList = topologyTools.recursionGraphNodeData(options);

    graph.create(nodeList);
  });

  graph.on('click', function(params) {
    alert('graph.click');
  });

  function getData() {
    return $.ajax({ url: 'src/data-untreated.json', dataType: "json" })
  }
});
</script>

```

> 效果图

![image](https://gitee.com/mliang/topology-zrender/raw/develop/src/image/topology.png)