antv g6

最新推荐文章于 2025-08-02 18:25:04 发布

转载最新推荐文章于 2025-08-02 18:25:04 发布 · 3.5k 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lexus/p/9440428.html

<!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>