美文网首页
记一次jquery关系图

记一次jquery关系图

作者: lao老麻 | 来源:发表于2020-11-27 11:46 被阅读0次

用的是jtopo关系图框架
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
// stage.mode = "drag";/* 只可以拖拽 ,不可拖拉节点 /
stage.wheelZoom = 0.85; /
鼠标缩放比例 */

/* 创建中心点 */
var cloudNode = new JTopo.CircleNode('中心点'); /* NodeF方形 CircleNode圆形 */
cloudNode.setSize(50, 50); /* 中心点大小 */
cloudNode.setLocation(360, 220); /* 中心点位置 */
cloudNode.fillColor = '255,255,0';/* 节点背景色 */
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);
/* 循环创建二级目录和三级目录 */
for (var i = 0; i < 3; i++) {
  var node = new JTopo.CircleNode('二级目录' + i);
  node.fillColor = '255,255,0';/* 节点背景色 */
  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距离定位点高度*/
  } else if (i == 1) {
    node.layout = { type: 'circle', radius: 100 };/* 三级目录为树状形 */
  } else {
    node.layout = { type: 'circle', radius: 100 }; /* 三级目录为圆形,半径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('三级目录' + i + '-' + j);
    vmNode.radius = 10;
    vmNode.fillColor = '255,255,0';/* 节点背景色 */
    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); // 放入到场景中

//放大事件
('#big').click(function () { stage.zoomOut(); }); //缩小事件('#little').click(function ()

相关文章

网友评论

      本文标题:记一次jquery关系图

      本文链接:https://www.haomeiwen.com/subject/lxhxwktx.html