一、效果圖：
代碼位址：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: px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/d3.min.js" ></script>
<script>
var width = ,
height = ;
var cluster = d3.layout.tree()
.size([width, height - ]);
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+)+" "+d.source.x+
" L"+(d.source.y+)+" "+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+ -) + ")";
})
node.append("rect")
.attr("width",)
.attr("height",)
.attr("x",)
.attr("y",)
.attr("style","fill:#35AD5B;");
node.append("text")
.attr("dx", function(d) {
return ;
})
.attr("dy", )
.style("text-anchor", function(d) {
return "middle";
})
.style("fill","#fff")
.text(function(d) { return d.name; });
node.append("text")
.attr("dx", function(d) {
return ;
})
.attr("dy", )
.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: px;
}
</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:,
height:,
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:,
height:,
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: , right:, top: , bottom: };
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 = ,initObj = treeObj;
return function (treeObj,property){
if(treeObj.children.length==){
treeObj[property] = i++;
return initObj;
}else{
treeObj[property] = i++;
for(var j=;j<treeObj.children.length;j++){
treeObj.children[j][property] = i++;
if(j==(treeObj.children.length-)){
return arguments.callee(treeObj.children[j],property);
}else{
arguments.callee(treeObj.children[j],property);
}
}
}
};
}
function render(root){
//給第一個節點添加初始坐标x0和x1，避免不自然效果
root.x0 = that.height / ;
root.y0 = ;
//以第一個節點為起始節點，重繪
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 * ; });
//(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", )
.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 ? - : ; })
.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", );
//2. 節點的 Update 部分的處理辦法
var updateNodes = nodeUpdate.transition()
.duration()
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
updateNodes.select("circle")
.attr("r", function(d){
return ((d.number/root.number)*<)?:(d.number/root.number)*;
})
.style("fill", function(d) {
return that.colors[d.depth];
})
.style("stroke",function(d) {
return that.colors[d.depth];
});
updateNodes.select("text").style("fill-opacity", );
//3.節點的 Exit 部分的處理辦法
var exitNodes = nodeExit.transition()
.duration()
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
exitNodes.select("circle").attr("r", );
exitNodes.select("text").style("fill-opacity", );
//（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/<)?:d.source.depth/)
.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)*<)?:(d.target.number/root.number)*;
})
.style("stroke-linecap","round")
.style("stroke-opacity",function(d) {
return (d.source.depth/<)?:d.source.depth/;
})
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration()
.attr("d", diagonal);
//2. 連線的 Update 部分的處理辦法
linkUpdate.transition()
.duration()
.attr("d", diagonal);
//3.連線的 Exit 部分的處理辦法
linkExit.transition()
.duration()
.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
}
}
}
}