var module = requestUrl('/Home/ModuleList', null);
module = eval("(" + module + ")");

//svg图数据var treeData = null;//如果左侧菜单目录不为空if (module.total != 0) {var json = "[";//循环第一层for (var i = 0; i < module.total; i++) {//根节点var root = module.rows[i].PARENTID;//如果为第一层if (module.rows[i].LEVEL == '1') {json += "{";json += "'name': '" + module.rows[i].MODULE + "(" + module.rows[i].MODULEID +")',";json += "'parent':'信息管理系统(0)','value': 10,'children': [";//当前的模块IDvar moduleId = module.rows[i].MODULEID;var parentId = null;for (var j = 0; j < module.total; j++) {//如果为第二层if (module.rows[j].LEVEL == '2') {//获取第二层父IDparentId = module.rows[j].PARENTID;var moduleId_children = module.rows[j].MODULEID;//如果第二层父ID等于第一层模块IDif (moduleId == parentId) {json += "{";json += "'name':'" + module.rows[j].MODULE + "(" + module.rows[j].MODULEID+")',";json += "'parent': '" + module.rows[i].MODULE + "','value': 10,'children': [";for (var k = 0; k < module.total; k++) {if (module.rows[k].LEVEL == '3') {parentId = null;parentId = module.rows[k].PARENTID;if (moduleId_children == parentId) {json += "{";json += "'name': '" + module.rows[k].MODULE + "(" + module.rows[k].MODULEID +")','value': 5";json += "},";}}}json += "]},";}}}json += "]},";}}json += "]";//svg数据[json]treeData = [{"name": "信息管理系统(0)","parent": "root","value": 10,"children": eval("(" + json + ")")}];

// ************** Generate the tree diagram  *****************//定义树图的全局属性（宽高）var margin = { top: 10, right: 120, bottom: 20, left: 400 },width = 1200 - margin.right - margin.left,height = 600 - margin.top - margin.bottom;var i = 0,duration = 750,//过渡延迟时间
        root;var tree = d3.layout.tree()//创建一个树布局
        .size([height, width]);var diagonal = d3.svg.diagonal().projection(function (d) { return [d.y, d.x]; });//创建新的斜线生成器//声明与定义画布属性var svg = d3.select("body").append("svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");root = treeData[0];//treeData为上边定义的节点属性root.x0 = height / 2;root.y0 = 0;update(root);d3.select(self.frameElement).style("height", "750px");function update(source) {// Compute the new tree layout.计算新树图的布局var nodes = tree.nodes(root).reverse(),links = tree.links(nodes);// Normalize for fixed-depth.设置y坐标点，每层占180pxnodes.forEach(function (d) { d.y = d.depth * 180; });// Update the nodes…每个node对应一个groupvar node = svg.selectAll("g.node").data(nodes, function (d) { return d.id || (d.id = ++i); });//data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定// Enter any new nodes at the parent's previous position.新增节点数据集，设置位置var nodeEnter = node.enter().append("g")  //在 svg 中添加一个g，g是 svg 中的一个属性，是 group 的意思，它表示一组什么东西，如一组 lines ， rects ，circles 其实坐标轴就是由这些东西构成的。.attr("class", "node") //attr设置html属性，style设置css属性.attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }).on("click", click);//添加连接点---此处设置的是圆圈过渡时候的效果（颜色）// nodeEnter.append("circle")//   .attr("r", 1e-6);//d 代表数据，也就是与某元素绑定的数据。
nodeEnter.append("path").style("stroke-width", "2px").style("stroke", "#EB5409").style("fill", "white").attr("d", d3.svg.symbol().size(function (d) {if(d.value <= 9) { return "400"; } else if(d.value >= 9) { return "400"; }}).type(function (d) {if(d.value <= 9) { return "triangle-up"; } else if(d.value >= 9) { return "circle"; }})).attr('class', function (d) {if (d.value <= 9) {return 'bling';} else {return 'fill_normal';}});//添加标签nodeEnter.append("text").attr("x", function (d) { return d.children || d._children ? -13 : 13; }).attr("dy", ".35em").attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }).text(function (d) { return d.name; }).style("fill-opacity", 1e-6);// Transition nodes to their new position.将节点过渡到一个新的位置-----主要是针对节点过渡过程中的过渡效果//node就是保留的数据集，为原来数据的图形添加过渡动画。首先是整个组的位置var nodeUpdate = node.transition()  //开始一个动画过渡.duration(duration)  //过渡延迟时间,此处主要设置的是圆圈节点随斜线的过渡延迟.attr("r", 10).attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });//更新连接点的填充色// nodeUpdate.select("circle")// .attr("r", 10)// .attr('class',function(d){//   if(d.value <= 9){//     return 'bling';//   }else{//     return 'fill_normal';//   }// });nodeUpdate.select("path").style("stroke-width", "2px").style("stroke", "#EB5409").style("fill", "white").attr("d", d3.svg.symbol().size(function (d) {if(d.value <= 9) { return "400"; } else if(d.value >= 9) { return "400"; }}).type(function (d) {if(d.value <= 9) { return "triangle-up"; } else if(d.value >= 9) { return "circle"; }})).attr('class', function (d) {if (d.value <= 9) {return 'bling';} else {return 'fill_normal';}});nodeUpdate.select("text").style("fill-opacity", 1);// Transition exiting nodes to the parent's new position.过渡现有的节点到父母的新位置。//最后处理消失的数据，添加消失动画var nodeExit = node.exit().transition().duration(duration).attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; }).remove();nodeExit.select("circle").attr("r", 1e-6);nodeExit.select("text").style("fill-opacity", 1e-6);// Update the links…线操作相关//再处理连线集合var link = svg.selectAll("path.link").data(links, function (d) { return d.target.id; });// Enter any new links at the parent's previous position.//添加新的连线link.enter().insert("path", "g").attr("class", "link").attr("d", function (d) {var o = { x: source.x0, y: source.y0 };return diagonal({ source: o, target: o });  //diagonal - 生成一个二维贝塞尔连接器, 用于节点连接图.
            }).style("stroke", function (d) {//d包含当前的属性console.log(d)return '#ccc';});// Transition links to their new position.将斜线过渡到新的位置//保留的连线添加过渡动画
        link.transition().duration(duration).attr("d", diagonal);// Transition exiting nodes to the parent's new position.过渡现有的斜线到父母的新位置。//消失的连线添加过渡动画
        link.exit().transition().duration(duration).attr("d", function (d) {var o = { x: source.x, y: source.y };return diagonal({ source: o, target: o });}).remove();// Stash the old positions for transition.将旧的斜线过渡效果隐藏nodes.forEach(function (d) {d.x0 = d.x;d.y0 = d.y;});}//定义一个将某节点折叠的函数//Toggle children on click.切换子节点事件function click(d) {if (d.children) {d._children = d.children;d.children = null;} else {d.children = d._children;d._children = null;}update(d);}// 定义菜单选项var userMenuData = [[{text: "添加",func: function () {// id为节点idvar id = $(this).children("text").html();id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));showDialog(id);}},{text: "修改",func: function () {var id = $(this).children("text").html();id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));showEditDialog(id);}},{text: "禁用",func: function () {var id = $(this).children("text").html();id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));}},{text: "删除",func: function () {var id = $(this).children("text").html();id = id.substring(id.indexOf("(") + 1, id.indexOf(")"));deleteAppModule(id);}}]];// 事件监听方式添加事件绑定$("g").smartMenu(userMenuData, {name: "chatRightControl",container: "g.node"});