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">
$.getJSON('../../../static/data/chengshifuwu.json',function(data){
  var Util = G6.Util;
  var Layout = G6.Layout;
  // 自定义节点
  G6.registNode('customNode', {
    afterDraw: function(cfg, group, keyShape){
      var model = cfg.model;
      var radius = cfg.size[0]/2;
      // 填充透明度设置为0
      keyShape.attr({
        fillOpacity: 1
      });
      // 如果激活设置激活样式
      if(model.active){
        keyShape.attr({
          stroke: "#646464",
          lineWidth: 6,
          strokeOpacity: 0.9
        });
      }
      // 添加节点文本
      group.addShape('text', {
        attrs: {
          x: cfg.x + radius,
          y: cfg.y,
          text: model.id,
          fill: "#333",
          textAlign: 'left',
          fontSize: 16
        }
      });
    }
  }, 'circle');

  var layout = new Layout.Force({
    nodes: data.nodes,
    edges: data.edges
  });
  var net = new G6.Net({
    id: 'c1', // 容器ID
    height: 450,        // 画布高
    useAnchor: null
  });
  net.source(data.nodes, data.edges);
  net.node()
    .color('#36E6BE')
    .size(function(obj){
      var sizeDomain = 100;
      return obj.value/100 * sizeDomain;
    });
  net.edge()
    .size(function(obj){
      var sizeDomain = 10;
      return obj.value/100 * sizeDomain;
    })
    .label('value');
  net.render();
  layout.onNodeChange = function(id, point){
    var node = net.find(id);
    net.update(node, {
      x: point.x*60+300,
      y: point.y*60+300
    });
    net.refresh();
  };
});
</script>

      </body>
    </html>
          

城市服务

该示例展示的是支付宝城市服务页面之间的调用关系，节点大小表示节点重要度，含边框表示正在关注的节点，边的粗细表示流量带下。该示例的目的在于向大家展示动态力导图的用法。（数据纯属虚构）