众所周知，这个插件使用的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"
});
效果如下图:
