《交通大数据处理与分析》D3树状图

通过本讲的学习，希望大家能够使用D3可视化工具进行树状 图的绘制。
谢谢观看
3.2在 SVG 中添加图形元素
var svg = d3.select(‘svg’).append(‘g’） .attr("transform", "translate(140,0)");
2.实现步骤
步骤三：绘制图形
3.3绘制连线
var link = svg.selectAll(".link") .data(links) .enter() .append("path") .attr("class", "link") .attr(“d”, diagonal）;
交通大数据处理与分析——
D3树状图
D3树状图
知识目标：
1.掌握D3可视化库进行树状图绘图 的方法
2.能够使用D3可视化库绘制树状图
D3树状图
树状图效果图 实现步骤 完整代码
1.效果图
2.实现步骤
步骤一：准备数据 步骤二：数据转换 步骤三：绘制图形
2.实现步骤
步骤一：准备数据
现有数据如下： ..\demo\tree\city.json
//节点元素绘制圆 node.append("circle") .attr("r", 4.5); //添加文本 node.append("text") .attr("dx", function(d) { return d.children ? -8 :
8; }) .attr("dy", 3) .style("text-anchor", function(d) { return
2.实现步骤
步骤三：绘制图形
3.1创建一个对角线生成器：对角线生成器，只需要 输入两个顶点坐标，即可生成一条贝塞尔曲线。
var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; })
2.实现步骤
步骤三：绘制图形
d.children ? "end" : "start"; }) .text(function(d) { return d.name; });
2.完整代码
..\demo\tree\tree.txt
本讲主要讲解了使用D3可视化库进行树状图绘制的完整流程： 数据的准备、数据转换、绘图（创建一个对角线生成器、在 SVG 中 添加图形元素、绘制连线，绘制节点、节点元素绘制圆、添加文 本）。通过一个完整的树状图实例，讲解核心代码。
2.实现步骤
步骤三：绘制图形
3.4绘制节点
//获取所有节点元素 var node = svg.selectAll(".node") .data(nodes) .enter() .append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
ຫໍສະໝຸດ Baidu
2.实现步骤
步骤二：数据转换
var tree = d3.layout.tree()
//树状生成器
.size([400, 400])
//设定尺寸，即转换后的各个
节点的坐标在哪一个范围内；
.separation(function (a, b) { //设置节点之间的间隔；
return (a.parent == b.parent ? 1 : 2)
});
2.实现步骤
步骤二：数据转换
d3.json("city.json", function(error, root) { var nodes = cluster.nodes(root); var links = cluster.links(nodes);
console.log(nodes); console.log(links); }