antv g6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="/g6.js"></script>
<script src="/plugins.js"></script>
<script src="/jquery-3.2.1.min.js"></script>
<script src="/d3-4.13.0.min.js"></script>
<script>

const data = {
  "nodes": [
    {
      "shape": "customNode",
      "id": "node1",
      "x": 50,
      "y": 100,
      label:"html"
    },
    {
      "shape": "customNode",
      "id": "node2",
      "x": 250,
      "y": 100,
      label:"div[1]"
    },
        {
      "shape": "customNode",
      "id": "node3",
      "x": 400,
      "y": 600,
      label:"div[2]"
    }
  ],
  "edges":[{"id":"111","source":"node1","target":"node2"},{"id":"222","source":"node1","target":"node3"}]
};
G6.registerNode('customNode', {
  draw(item){
    const group = item.getGraphicGroup();
    const model = item.getModel();

 group.addShape('text', {
      attrs: {
        x: -15,
        y: -5,
        fill: '#000',
        text: model.label,
        textBaseline: 'top'
      }
    });


    return group.addShape('circle', {
      attrs: {
        x: 0,
        y: 0,
        r:20,
        stroke:'#000'

      }
    });
  }
});




        


  var graph = new G6.Graph({
    id: 'mountNode', // dom id
    height: window.innerHeight,
    //plugins: [template, nodeSizeMapper, nodeColorMapper, edgeSizeMapper],
    animate: true,
    layout: {}
  });


  var dagre = new G6.Layouts['Dagre']({
    nodesep: function nodesep() {
      return graph.getWidth() / 50;
    },
    ranksep: function ranksep() {
      return graph.getHeight() / 25;
    },
    marginx: function marginx() {
      return graph.getWidth() / 8;
    },
    marginy: function marginy() {
      return graph.getHeight() / 8;
    },

    useEdgeControlPoint: false
  });


 
 
 
 
 
 
 
 
  graph.read(data);
  graph.changeLayout(dagre);


</script>
</body>
</html>

posted on 2018-08-08 00:09  lexus 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lexus/p/9440428.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值