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