antv g6 - lexus - 博客园

公告

本站大量内容为转载，一般都保留原链接，如果侵犯了你的权益，请以各种方式联系我，我会第一时间修正。浙江省高校青年教师岗前培训考试题库app

昵称： lexus
园龄： 17年11个月
粉丝： 240
关注： 6

+加关注

随笔档案 (12599)

相册 (5)

北京

最新评论

1. Re:163data.com.cn是什么？终于搞清楚了...
而且这个反向解析地址的开头数字，还真就是原ip反写的😄️
--tp20c5
2. Re:吾爱破解论坛-LCG-LSG|安卓破解|病毒分析|破解软件|www.52pojie.cn
10【美奇网】meiqiwcom
--努力的大象
3. Re:一键ghost【onekey ghost】最新版本下载,一键ghost官网
支持Markdow
--1我要
4. Re:打码兔官网验证码识别远程答题服务代答平台验证码识别软件下载
--倪倪嫲嫲
5. Re:手工DIY：手机变身扫描仪_极客迷
1
--【Jιn＂H。】

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>