可视化工具--D3--案例分析--Reingold Tilford Tree

可视化工具–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; });