用的是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); // 放入到场景中
//放大事件
('#little').click(function ()
网友评论