用的是jtopo關(guān)系圖框架
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 創(chuàng)建一個(gè)舞臺(tái)對(duì)象
var scene = new JTopo.Scene(stage); // 創(chuàng)建一個(gè)場(chǎng)景對(duì)象
// stage.mode = "drag";/* 只可以拖拽 ,不可拖拉節(jié)點(diǎn) /
stage.wheelZoom = 0.85; / 鼠標(biāo)縮放比例 */

/* 創(chuàng)建中心點(diǎn) */
var cloudNode = new JTopo.CircleNode('中心點(diǎn)'); /* NodeF方形 CircleNode圓形 */
cloudNode.setSize(50, 50); /* 中心點(diǎn)大小 */
cloudNode.setLocation(360, 220); /* 中心點(diǎn)位置 */
cloudNode.fillColor = '255,255,0';/* 節(jié)點(diǎn)背景色 */
cloudNode.font = "16px Consolas"/* 字體大小 */
cloudNode.fontColor = '0,0,0';
cloudNode.textPosition = "Middle_Center"/* 字體位置 'Top_Left', 'Top_Center', 'Top_Right', 'Middle_Left', 'Middle_Center', 'Middle_Right', 'Bottom_Left', 'Bottom_Center', 'Bottom_Right'*/
cloudNode.layout = { type: 'circle', radius: 160 };
scene.add(cloudNode);
/* 循環(huán)創(chuàng)建二級(jí)目錄和三級(jí)目錄 */
for (var i = 0; i < 3; i++) {
  var node = new JTopo.CircleNode('二級(jí)目錄' + i);
  node.fillColor = '255,255,0';/* 節(jié)點(diǎn)背景色 */
  node.font = "15px Consolas"/* 字體大小 */
  node.fontColor = '0,0,0';
  node.radius = 15;
  node.setLocation(scene.width * Math.random(), scene.height * Math.random());
  if (i == 2) {
    node.layout = { type: 'tree', direction: 'top', width: 100, height: 90 };/* width 間距  height距離定位點(diǎn)高度*/
  } else if (i == 1) {
    node.layout = { type: 'circle', radius: 100 };/* 三級(jí)目錄為樹狀形 */
  } else {
    node.layout = { type: 'circle', radius: 100 }; /* 三級(jí)目錄為圓形,半徑100 */
  }
  scene.add(node);
  var link = new JTopo.CurveLink(cloudNode, node);/* 建立連線 */
  /* var link = new JTopo.Link(nodeA, nodeZ, text); // 直線
     var link = new JTopo.FoldLink(nodeA, nodeZ, text);  // 折線
     var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);// 二次折線 
     var link = new JTopo.CurveLink(nodeA, nodeZ, text); // 曲線 */
  link.strokeColor = "255,255,0"/* 連線顏色 */
  scene.add(link);

  for (var j = 0; j < 6; j++) {
    var vmNode = new JTopo.CircleNode('三級(jí)目錄' + i + '-' + j);
    vmNode.radius = 10;
    vmNode.fillColor = '255,255,0';/* 節(jié)點(diǎn)背景色 */
    vmNode.fontColor = '0,0,0';
    vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
    scene.add(vmNode);
    var alink = new JTopo.CurveLink(node, vmNode);/* 建立連線 */
    alink.strokeColor = "255,255,0"/* 連線顏色 */
    scene.add(alink);
  }
}
JTopo.layout.layoutNode(scene, cloudNode, true);
scene.add(node); // 放入到場(chǎng)景中

//放大事件
('#little').click(function ()