【 D3.js 入门系列 --- 9.5 】 树状图的制作
2014-08-14 17:46
736 查看
本人的个人博客为:www.ourd3js.com
csdn博客为:blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
树状图( Tree )通常用于表示层级、上下级、包含与被包含关系。树状图的制作和
9.4节集群图的制作 的代码几乎完全一样。不错,你没看错,几乎完全一样。那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同。数据为:
集群图的结果为:
树状图的结果为:
知道有什么分别了吗?下面是树状图的代码:
csdn博客为:blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
树状图( Tree )通常用于表示层级、上下级、包含与被包含关系。树状图的制作和
9.4节集群图的制作 的代码几乎完全一样。不错,你没看错,几乎完全一样。那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同。数据为:
{ "name":"中国", "children": [ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":"绍兴" } ] }, { "name":"广西" , "children": [ { "name":"桂林", "children": [ {"name":"秀峰区"}, {"name":"叠彩区"}, {"name":"象山区"}, {"name":"七星区"} ] }, {"name":"南宁"}, {"name":"柳州"}, {"name":"防城港"} ] }, { "name":"黑龙江", "children": [ {"name":"哈尔滨"}, {"name":"齐齐哈尔"}, {"name":"牡丹江"}, {"name":"大庆"} ] }, { "name":"新疆" , "children": [ {"name":"乌鲁木齐"}, {"name":"克拉玛依"}, {"name":"吐鲁番"}, {"name":"哈密"} ] } ] }
集群图的结果为:
树状图的结果为:
知道有什么分别了吗?下面是树状图的代码:
<html> <head> <meta charset="utf-8"> <title>Tree</title> </head> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 500, height = 500; var tree = d3.layout.tree() .size([width, height-200]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); 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)"); d3.json("city_tree.json", function(error, root) { var nodes = tree.nodes(root); var links = tree.links(nodes); 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 + ")"; }) 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 d.children ? "end" : "start"; }) .text(function(d) { return d.name; }); }); </script> </body> </html>这段代码和9.4节的代码完全相同。除了 33行,定义的 layout 由 cluster 变为 tree 之外,其他的都是一样的。
相关文章推荐
- 【 D3.js 入门系列 --- 9.4 】 集群图的制作
- 【 D3.js 入门系列 --- 9.4 】 集群图的制作
- 【 D3.js 入门系列 --- 9.3 】 弦图的制作
- 【 D3.js 入门系列 --- 9.2 】 力学图的制作
- 【 D3.js 入门系列 --- 9.6 】 打包图的制作
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 入门系列 --- 10 】 地图的绘制
- CSS 菜单系列:用 UL 制作横向导航菜单-入门版
- 【 D3.js 入门系列 — 11 】 入门总结
- 【 D3.js 入门系列 --- 8 】 对话操作(事件)
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
- 【 D3.js 入门系列 --- 10.2 】 可拖动的地图
- 【 D3.js 入门系列 --- 0 】 简介和安装
- ECMall2.x模板制作入门系列之(模板标签/语法)
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
- Windows Server入门系列之七 制作系统工具优盘并安装系统
- 【 D3.js 入门系列 --- 9 】 常见可视化图形
- Windows Server入门系列之六 制作系统工具光盘