d3 树形图的使用
首先声明一下,这个树形图的使用方法是在
的例子上添加了一小部分功能,大家可以先去看一下原版的实现,然后再来看这篇,不然我都不知道我在说什么。
原文章最后的树状图如下:
实现这个图的源码可以在这个链接的最下面下载。
我们想要实现的那一小部分功能是:举例,点击桂林圆点,圆点变红,同时桂林节点的子节点收回,再点击广西圆点,圆点变红,同时广西节点的子节点收回。再次点击广西节点,圆点填充为空,同时展开子节点,这时候的桂林节点的子节点依然收回,也就是桂林节点的颜色为红。
javascript代码如下,主要看注释部分,其他的内容看原文章:
<script>
var width = 500;
var height = 500;
var tree = d3.layout.tree()
.size([width, height-200])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });
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)");
var draw = function(error,root){
d3.select("svg").remove();
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate(40,0)");
var nodes = tree.nodes(root);
var links = tree.links(nodes);
**//用来为每一个节点的children添加一个备份**
for(var i=0;i<nodes.length;i++){
if(nodes[i].children) {
nodes[i].childrenB = nodes[i].children;
}
}
console.log(nodes);
console.log(links);
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.on("click",function(d){ //为节点添加click事件
if(d.children){//如果这个节点有children属性,则删除并重新绘图
delete d.children;
draw(error,root);
}
else{//否则的话,检测这个节点是否有childrenB属性,有的话为这个节点添加children属性,并重新绘图
if(d.childrenB){
d.children=d.childrenB;
draw(error,root);
}
}
})
node.append("circle")
.attr("r", 4.5)
.style("fill",function(d){
if(d.childrenB&&!d.children){//如果节点的childrenB属性为真,并且children属性为假时表示这个节点有子节点,但是节点收回了,因此填充红色。
return "red";
}
else{
return "white";
}
})
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
};
d3.json("city_tree.json", draw);
</script>
运行结果图图下: