G6 - 节点方法

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>节点方法</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
$('body').prepend('<button id="getEdges">getEdges</button>   <button id="getLinkNodes">getLinkNodes</button>   <button id="getUnLinkNodes">getUnLinkNodes</button>   <button id="getRelativeItems">getRelativeItems</button>   <button id="getUnRelativeItems">getUnRelativeItems</button>   ')
var Util = G6.Util;
// 第三步：设置数据
var data = {
  "source": {
    "nodes": [
      {
        "shape": "rect",
        "label": "节点",
        "id": "keyNode",
        "x": 710,
        "y": 260,
        "color": "#FF9D2D"
      },
      {
        "shape": "rect",
        "label": "节点1",
        "x": 780,
        "y": 150,
        "id": "f7171de1"
      },
      {
        "shape": "rect",
        "label": "节点2",
        "x": 550,
        "y": 210,
        "id": "f2201be8"
      },
      {
        "shape": "rect",
        "label": "节点3",
        "x": 590,
        "y": 340,
        "id": "b5b421cf"
      },
      {
        "shape": "rect",
        "label": "节点4",
        "x": 780,
        "y": 360,
        "id": "a285b5dc"
      }
    ],
    "edges": [
      {
        "shape": "arrow",
        "source": "keyNode",
        "target": "f2201be8",
        "id": "672f31fc"
      },
      {
        "shape": "arrow",
        "source": "keyNode",
        "target": "b5b421cf",
        "id": "62ed8cb2"
      },
      {
        "shape": "arrow",
        "source": "b5b421cf",
        "target": "keyNode",
        "id": "4542e914",
        "controlPoints": [
          {
            "x": 590,
            "y": 324
          },
          {
            "x": 590,
            "y": 260
          },
          {
            "x": 679,
            "y": 260
          }
        ]
      },
      {
        "shape": "smoothArrow",
        "source": "f7171de1",
        "target": "keyNode",
        "id": "58624bdb",
        "controlPoints": [
          {
            "x": 749,
            "y": 150
          },
          {
            "x": 700,
            "y": 150
          },
          {
            "x": 710,
            "y": 244
          }
        ]
      },
      {
        "shape": "arrow",
        "source": "f7171de1",
        "target": "a285b5dc",
        "id": "f119308c"
      }
    ]
  }
};
// 第四步：配置G6画布
var net = new G6.Net({
    id: 'c1',      // 容器ID
    fitView: 'autoZoom',
    mode: 'none',
    width: 500,    // 画布宽
    height: 500    // 画布高
  });
// 第五步：载入数据
net.read(Util.clone(data));
// 第六步：渲染关系图
net.render();

$('#getEdges').on('click', function(){
  reRender(); // 重新渲染
  var keyNode = net.find('keyNode');
  var edges = keyNode.getEdges();
  Util.each(edges, function(edge){
    net.update(edge, {
      color: '#00B07C'
    });
  });
  net.refresh();
});

$('#getLinkNodes').on('click', function(){
  reRender(); // 重新渲染
  var keyNode = net.find('keyNode');
  var nodes = keyNode.getLinkNodes();
  Util.each(nodes, function(node){
    net.update(node, {
      color: '#00B07C'
    });
  });
  net.refresh();
});

$('#getUnLinkNodes').on('click', function(){
  reRender(); // 重新渲染
  var keyNode = net.find('keyNode');
  var nodes = keyNode.getUnLinkNodes();
  Util.each(nodes, function(node){
    net.update(node, {
      color: '#00B07C'
    });
  });
  net.refresh();
});

$('#getRelativeItems').on('click', function(){
  reRender(); // 重新渲染
  var keyNode = net.find('keyNode');
  var items = keyNode.getRelativeItems();
  Util.each(items, function(item){
    net.update(item, {
      color: '#00B07C'
    });
  });
  net.refresh();
});

$('#getUnRelativeItems').on('click', function(){
  reRender(); // 重新渲染
  var keyNode = net.find('keyNode');
  var items = keyNode.getUnRelativeItems();
  Util.each(items, function(item){
    net.update(item, {
      color: '#00B07C'
    });
  });
  net.refresh();
});

function reRender(){
  net.clear();
  net.read(Util.clone(data));
  net.render();
}
</script>

      </body>
    </html>
          
节点方法