开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

mliang / topology-zrenderJavaScriptGPL-2.0

Watch 12 Star 21 Fork 3
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 Web 的逻辑拓扑图渲染,基于 zrender 开发 展开 收起

maliang 最后提交于 v2.0.0
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

topology-zrender v2.0

示例

直接用浏览器打开index.html,使用前需要运行yarn install加载依赖

使用

当前版本依赖zrender@4.0.4,lodash@4.17.10,并使用yarn管理

#加载依赖

yarn install

项目中加载

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/lodash/lodash.min.js"></script>
  <script src="node_modules/zrender/dist/zrender.min.js"></script>
  <script src="src/topology-zrender.js"></script>
  <script src="src/topology-zrender-tools.js"></script>

项目中使用

<div id="topologyGraph" style="width: 100%;height: 100%"></div>
<script>
  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: 'name',
      // 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

版本更新说明

相比于v1.0有以下更新

  1. 使用yarn管理依赖包
  2. 升级zrender到4.0版本
  3. 实现整体拖拽和缩放功能

项目点评 ( 3 )

你可以在登录后,发表评论

搜索帮助