可视化工具–D3–案例分析
Reingold Tilford Tree
Reingold Tilford树是由Edward Reingold和John Tilford一起提出并发表的一种大型树拓扑结构,用来紧凑分层的展示数据结构。
实例链接 http://bl.ocks.org/mbostock/4063550
部分接口:
separation:设置相隔结点之间的间隔计算函数
diagonal.radial:创建一个新的斜线生成器
projection:设置一个可选的点变换器
tree.nodes:计算并返回指定结点的子结点信息
tree.links:计算一个子结点数组与父结点的连接信息
创建树布局并定义布局信息:
var tree = d3.layout.tree()
.size([360, diameter / 2 - 120])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
定义线与点:
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
读取数据后计算节点层次信息:
var nodes = tree.nodes(root),
links = tree.links(nodes);
添加节点:
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });
node.append("circle")
.attr("r", 4.5);
加树中节点间连线:
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
添加文本信息:
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.name; });