html树图制作,d3.js制作树结构图

一、运行效果

说明：使用鼠标滚轮放大缩小，点解节点可以收缩打开子节点，按住鼠标左键拖动可移动整体图形。

二、实现过程

1、编写html和css结构

.node {

ursor: pointer;

}

.node circle {

fill: #fff;

stroke: steelblue;

stroke-width: 1.5px;

}

.node text {

font: 10px sans-serif;

}

.link {

fill: none;

stroke: #ccc;

stroke-width: 1.5px;

}

.tree{

width: 800px;

height: 800px;

margin: 0 auto;

background: #E0E0E0;

}

.tree svg{

width: 100%;

height: 100%;

}

2、创建tree布局var margin = [20, 120, 20, 120],

width = document.getElementById("tree").offsetWidth,

height = document.getElementById("tree").offsetHeight;

var i = 0,

duration = 750,

root;

var tree = d3.layout.tree() //创建d3树布局，并定义画布大小

.size([height, width]);

var diagonal = d3.svg.diagonal()

.projection(function(d) { return [d.y, d.x]; });

var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件

var svg = d3.select("body").select("#tree").append("svg")

.call(zoom)//给svg绑定zoom事件

.append("g")

.attr("transform", "translate(" + margin[3] + "," + margin[0] + ")")

.call(zoom)//给g绑定zoom事件

.append("g");

function zoomed() { //根据操作更改svg的大小位置

svg.attr("transform",

"translate(" + zoom.translate() + ")" +

"scale(" + zoom.scale() + ")"

);

}

3、在书布局中创建tree的每个节点，并绑定点击收缩展开子节点事件root = json[0];

root.x0 = height / 2;

root.y0 = 0;

root.children.forEach(collapse);

update(root);  //根据数据，创建节点以及连线

function collapse(d) {

if (d.children) {

d._children = d.children;

d._children.forEach(collapse);

d.children = null;

}

}

function update(source) {

var nodes = tree.nodes(root).reverse(),

links = tree.links(nodes);

nodes.forEach(function(d) { d.y = d.depth * 180; });

var node = svg.selectAll("g.node")

.data(nodes, function(d) { return d.id || (d.id = ++i); });

var nodeEnter = node.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

.on("click", click);

nodeEnter.append("circle")

.attr("r", 1e-6)

.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("text")

.attr("x", function(d) { return d.children || d._children ? -10 : 10; })

.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);

var nodeUpdate = node.transition()

.duration(duration)

.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")

.attr("r", 4.5)

.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeUpdate.select("text")

.style("fill-opacity", 1);

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);

var link = svg.selectAll("path.link")

.data(links, function(d) { return d.target.id; });

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});

});

link.transition()

.duration(duration)

.attr("d", diagonal);

link.exit().transition()

.duration(duration)

.attr("d", function(d) {

var o = {x: source.x, y: source.y};

return diagonal({source: o, target: o});

})

.remove();

nodes.forEach(function(d) {

d.x0 = d.x;

d.y0 = d.y;

});

}

function click(d) {

if (d.children) {

d._children = d.children;

d.children = null;

} else {

d.children = d._children;

d._children = null;

}

update(d);

}

注意，其中的json数据格式为：var json = [

{

"name": "张三",

"parent": "null",

"children": [

{

"name": "李四",

"parent": "张三",

"children": [

{

"name": "王五",

"parent": "李四",

"children": [

{"name": "程六","parent": "王五" },

{"name": "王八","parent": "王五" },

{"name": "王七","parent": "王五" },

{

"name": "王九",

"parent": "王五",

"children":[

{"name": "王十","parent": "王五" },

{"name": "王十一","parent": "王五" },

{"name": "王十二","parent": "王五" },

{"name": "王十三","parent": "王五" },

{"name": "王十四","parent": "王五" },

{

"name": "程五",

"parent": "王五",

"children":[

{"name": "程六","parent": "程五" },

{"name": "程七","parent": "程五" },

{"name": "程八","parent": "程五" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" }

]

}

]

}

]

},

{

"name": "马一",

"parent": "李四",

"children":[

{"name": "马二","parent": "马一" },

{"name": "马三","parent": "马一" },

{"name": "马四","parent": "马一" },

{"name": "马五","parent": "马一" },

{"name": "马六","parent": "马一" },

{"name": "马七","parent": "马一" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" }

]

}

]

},

{

"name": "小红",

"parent": "张三",

"children":[

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" },

{"name": "小王","parent": "小红" },

{"name": "小程","parent": "小红" },

{"name": "小陈","parent": "小红" },

{"name": "小明","parent": "小红" },

{"name": "小张","parent": "小红" }

]

}

]

}

];

三、项目结构图

四、补充说明

这里使用的是v3版本的d3.js，每个版本的d3.js都有些许不同，引入库时需要注意这点。