一、效果图：
代码地址：https://codepen.io/wlei/pen/YveRmB
二、数据结构
data.json:
{
“name”:”中国”,
“number”:”2000”,
“children”:
[
{
“name”:”浙江” ,
“number”:”100”,
“children”:
[
{
“name”:”杭州” ,
“number”:”100”
},
{
“name”:”宁波” ,
“number”:”200”
},
{
“name”:”温州” ,
“number”:”300”
},
{
“name”:”绍兴”,
“number”:”400”
}
]
},
{
“name”:”广西” ,
“number”:”500”,
“children”:
[
{
“name”:”桂林”,
“number”:”100”
},
{
“name”:”南宁”,
“number”:”200”
},
{
“name”:”柳州”,
“number”:”300”
},
{
“name”:”防城港”,
“number”:”400”
}
]
},
{
“name”:”黑龙江”,
“number”:”500”,
“children”:
[
{
“name”:”哈尔滨”,
“number”:”100”
},
{
“name”:”齐齐哈尔”,
“number”:”200”
},
{
“name”:”牡丹江”,
“number”:”300”
},
{
“name”:”大庆”,
“number”:”400”
}
]
},
{
“name”:”新疆” ,
“number”:”500”,
“children”:
[
{
“name”:”乌鲁木齐”,
“number”:”100”
},
{
“name”:”克拉玛依”,
“number”:”200”
},
{
“name”:”吐鲁番”,
“number”:”300”
},
{
“name”:”哈密”,
“number”:”400”
}
]}]}
三、html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.node {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/d3.min.js" ></script>
<script>
var width = 500,
height = 500;
var cluster = d3.layout.tree()
.size([width, height - 200]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("data.json", function(error, root) {
var nodes = cluster.nodes(root);
var links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", function(d){
return "M"+d.source.y+" "+d.source.x+
"L"+(d.source.y+120)+" "+d.source.x+
" L"+(d.source.y+120)+" "+d.target.x+" L"+
d.target.y+" "+d.target.x;
})
.attr("style",function(){
return "stroke:#F7881F"
});
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + (d.x+ -10) + ")";
})
node.append("rect")
.attr("width",100)
.attr("height",20)
.attr("x",0)
.attr("y",0)
.attr("style","fill:#35AD5B;");
node.append("text")
.attr("dx", function(d) {
return 30;
})
.attr("dy", 14)
.style("text-anchor", function(d) {
return "middle";
})
.style("fill","#fff")
.text(function(d) { return d.name; });
node.append("text")
.attr("dx", function(d) {
return 80;
})
.attr("dy", 14)
.style("text-anchor", function(d) {
return "middle";
})
.style("fill","#fff")
.text(function(d) { return d.number; });
});
</script>
</body>
</html>优化：
一、效果图
二、html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>组织结构图</title>
<style>
.node circle {
cursor: pointer;
}
.node text {
font-size: 14px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/TreeExtend.js"></script>
<script type="text/javascript">
var opt = {
colors:["#25a4f6","#92d1fa","#ae43a6","#f7881f","#f7881f"],
width:1000,
height:800,
container:'#test',//树形图容器，值为选择器
data:'new_file.json'//必填，url或对象
};
var TreeExtend = new TreeExtend(opt);
TreeExtend.init();
</script>
</body>
</html>二、数据结构
new_file.json
{
"name": "总数",
"type": "1",
"number": "904",
"children": [
{
"name": "一部",
"type": "1",
"children": [
{
"name": "计划",
"type": "1",
"children": [
{
"name": "2017年",
"type": "1",
"children": [
{
"name": "业务1",
"type": "1",
"children": [],
"number": "2" }, {
"name": "业务2",
"type": "1",
"children": [],
"number": "0" }, {
"name": "业务3",
"type": "1",
"children": [],
"number": "1" }
],
"number": "3"
}
],
"number": "4"
}, {
"name": "业务1",
"type": "1",
"children": [],
"number": "1"
}
],
"number": "616"
}, {
"name": "二部",
"type": "1",
"children": [
{
"name": "业务1",
"type": "1",
"children": [],
"number": "10"
}, {
"name": "业务2",
"type": "1",
"children": [],
"number": "0"
}
],
"number": "288"
}
]
}三、js –TreeExtend.js
function TreeExtend(option){
var _defaultOpt = {
colors:["#25a4f6","#92d1fa","#a2d403","#f7881f","#f7881f"],
width:1000,
height:800,
container:'',//树形图容器，值为选择器
data:''//必填，url或对象
};
option = $.extend(true, _defaultOpt,option);
this.colors = option.colors;
this.width = option.width;
this.height = option.height;
this.container = option.container;
this.data = option.data;
}
TreeExtend.prototype.init = function(){
var that = this;
var padding = {left: 100, right:50, top: 20, bottom: 20 };
var svg = d3.select(that.container)
.append("svg")
.attr("width", that.width + padding.left + padding.right)
.attr("height", that.height + padding.top + padding.bottom)
.append("g")
.attr("transform","translate("+ padding.left + "," + padding.top + ")");
//树状图布局
var tree = d3.layout.tree()
.size([that.height, that.width]);
//对角线生成器
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
if(Object.prototype.toString.call(that.data).toLowerCase()=='[object string]'){
d3.json(that.data, function(error, root) {
if (error) throw error;
var dataFun = getRecursionFunc(root);
root = dataFun(root,"key");
render(root);
});
}else{
render(that.data);
}
//获取给树形结构数据加字段的方法
function getRecursionFunc(treeObj){
var i = 0,initObj = treeObj;
return function (treeObj,property){
if(treeObj.children.length==0){
treeObj[property] = i++;
return initObj;
}else{
treeObj[property] = i++;
for(var j=0;j<treeObj.children.length;j++){
treeObj.children[j][property] = i++;
if(j==(treeObj.children.length-1)){
return arguments.callee(treeObj.children[j],property);
}else{
arguments.callee(treeObj.children[j],property);
}
}
}
};
}
function render(root){
//给第一个节点添加初始坐标x0和x1，避免不自然效果
root.x0 = that.height / 2;
root.y0 = 0;
//以第一个节点为起始节点，重绘
redraw(root);
//重绘函数
function redraw(source){
//(1)计算节点和连线的位置
//应用布局，计算节点和连线
var nodes = tree.nodes(root);
var links = tree.links(nodes);
//重新计算节点的y坐标
nodes.forEach(function(d) { d.y = d.depth * 180; });
//(2)节点的处理
//获取节点的update部分
var nodeUpdate = svg.selectAll(".node")
.data(nodes, function(d){ return d.key; });
//获取节点的enter部分
var nodeEnter = nodeUpdate.enter();
//获取节点的exit部分
var nodeExit = nodeUpdate.exit();
//1. 节点的 Enter 部分的处理办法
var enterNodes = nodeEnter.append("g")
.attr("class","node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", function(d) { toggle(d); redraw(d); });
enterNodes.append("circle")
.attr("r", 0)
.style("fill", function(d) {
return that.colors[d.depth];
})
.style("stroke",function(d) {
return that.colors[d.depth];
});
enterNodes.append("text")
.on("mouseover", function(d) {//连线mousehover事件
d3.select(this).style("font-size","18px")
.style("cursor","pointer");
})
.on("mouseout", function(d) {//连线mouseout事件
d3.select(this).style("font-size","14px")
.style("cursor","normal");
})
.attr("x", function(d) { return d.children || d._children ? -14 : 14; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name +"("+d.number+")"; })
.style("fill-opacity", 0);
//2. 节点的 Update 部分的处理办法
var updateNodes = nodeUpdate.transition()
.duration(500)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
updateNodes.select("circle")
.attr("r", function(d){
return ((d.number/root.number)*40<2)?1:(d.number/root.number)*20;
})
.style("fill", function(d) {
return that.colors[d.depth];
})
.style("stroke",function(d) {
return that.colors[d.depth];
});
updateNodes.select("text").style("fill-opacity", 1);
//3.节点的 Exit 部分的处理办法
var exitNodes = nodeExit.transition()
.duration(500)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
exitNodes.select("circle").attr("r", 0);
exitNodes.select("text").style("fill-opacity", 0);
//（3） 连线的处理
//获取连线的update部分
var linkUpdate = svg.selectAll(".link")
.data(links, function(d){
return d.target.key;
});
//获取连线的enter部分
var linkEnter = linkUpdate.enter();
//获取连线的exit部分
var linkExit = linkUpdate.exit();
//1. 连线的 Enter 部分的处理办法
linkEnter.insert("path",".node")
.on("mouseover", function(d) {//连线mousehover事件
d3.select(this).style("stroke-opacity","1")
.style("cursor","pointer");
})
.on("mouseout", function(d) {//连线mouseout事件
d3.select(this).style("stroke-opacity",(d.source.depth/10<0.2)?0.2:d.source.depth/10)
.style("cursor","normal");
})
.attr("class", "link")
.style("fill","none")
.style("stroke",function(d){
return that.colors[d.source.depth];
})
.style("stroke-width",function(d){
return ((d.target.number/root.number)*40<2)?2:(d.target.number/root.number)*40;
})
.style("stroke-linecap","round")
.style("stroke-opacity",function(d) {
return (d.source.depth/10<0.2)?0.2:d.source.depth/10;
})
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(500)
.attr("d", diagonal);
//2. 连线的 Update 部分的处理办法
linkUpdate.transition()
.duration(500)
.attr("d", diagonal);
//3.连线的 Exit 部分的处理办法
linkExit.transition()
.duration(500)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
//(4)将当前的节点坐标保存在变量x0、y0里，以备更新时使用
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
//切换开关，d 为被点击的节点
function toggle(d){
if(d.children){//如果有子节点
d._children = d.children; //将该子节点保存到 _children
d.children = null; //将子节点设置为null
}else{//如果没有子节点
d.children = d._children; //从 _children 取回原来的子节点
d._children = null; //将 _children 设置为 null
}
}
}
}
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
