小米关系图谱

<!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="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.0/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.6/build/plugins.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/d3-4.13.0.min.js"></script>
<script>
  $("#mountNode").css('backgroundColor', '#e5ddd1');
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json', function(data) {
    var Mapper = G6.Plugins['tool.d3.mapper'];
    var _d = d3,
      forceSimulation = _d.forceSimulation,
      forceLink = _d.forceLink,
      forceManyBody = _d.forceManyBody,
      forceX = _d.forceX,
      forceY = _d.forceY,
      forceCollide = _d.forceCollide;

// 拖拽节点交互
    var subject = void 0; // 逼近点
    graph.on('mousedown', function(ev) {
      if (ev.domEvent.button === 0) {
        subject = simulation.find(ev.x, ev.y);
      }
    });

graph.on('dragstart', function(ev) {
      subject && simulation.alphaTarget(0.3).restart();
    });

graph.on('drag', function(ev) {
      if (subject) {
        subject.fx = ev.x;
        subject.fy = ev.y;
      }
    });

graph.on('mouseup', resetState);
    graph.on('canvas:mouseleave', resetState);

function resetState() {
      if (subject) {
        simulation.alphaTarget(0);
        subject.fx = null;
        subject.fy = null;
        subject = null;
      }
    }

// 鼠标移入节点显示 label
    function tryHideLabel(node) {
      var model = node.getModel();
      var label = node.getLabel();
      var labelBox = label.getBBox();
      if (labelBox.maxX - labelBox.minX > model.size) {
        label.hide();
        graph.draw();
      }
    }
    var nodes = graph.getNodes();
    var edges = graph.getEdges();

edges.forEach(function(edge) {
      edge.getGraphicGroup().set('capture', false); // 移除边的捕获，提升图形拾取效率
    });

nodes.forEach(function(node) {
      tryHideLabel(node);
    });

graph.on('node:mouseenter', function(ev) {
      var item = ev.item;
      graph.toFront(item);
      item.getLabel().show();
      graph.draw();
    });

graph.on('node:mouseleave', function(ev) {
      var item = ev.item;
      tryHideLabel(item);
    });
  });
</script>
</body>
</html>

图表简介

展示了小米科技有限责任公司的企业关系图谱

树图

流图

网图

编辑器

小米关系图谱

图表简介