使用d3.v3插件绘制出svg图
众所周知，这个插件使用的svg技术，而IE8(包括IE8)之前的浏览器是不支持svg的
接下来看代码吧
从后台获取到带id和父id的目录数据[json格式]
var module = requestUrl('/Home/ModuleList', null); module = eval("(" + module + ")");
再将json拼成需要的svg格式
//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': ["; //当前的模块ID var moduleId = module.rows[i].MODULEID; var parentId = null; for (var j = 0; j < module.total; j++) { //如果为第二层 if (module.rows[j].LEVEL == '2') { //获取第二层父ID parentId = module.rows[j].PARENTID; var moduleId_children = module.rows[j].MODULEID; //如果第二层父ID等于第一层模块ID if (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 + ")") }];
接下来是绘制svg图的代码：
// ************** 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坐标点，每层占180px nodes.forEach(function (d) { d.y = d.depth * 180; }); // Update the nodes…每个node对应一个group var 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为节点id var 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" });
效果如下图:
