D3实现TREE树状图
2015-12-26 23:09
429 查看
<html> <head> <meta charset="utf-8"> <title>树状图</title> <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> </head> <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); }); 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>
相关文章推荐
- 二分搜索及其思想(挑战例题总结)
- android调整屏幕亮度
- Xcode7.2NSThread、GCD多线程创建及简单使用
- 本地socket unix domain socket
- D3实现的ChinaMap
- javascript之判断专题
- python之路之猜数游戏
- generator自动生成mybatis配置和类信息
- R的一些统计分析包工具
- codeforces 603 C. Load Balancing 贪心
- Sql使用日常总结
- iOS OC(四) 字符串NSString 可变数组NSMutableArray 不可变数组NSArray 数值对象类NSNumber NSValue 数值对象类NSNumber
- 进军服务器了,转点mysql操作命令
- 401.2 登录方法 尚未确定
- Java中的引用传递
- MariaDB Galera Cluster 部署(如何快速部署 MariaDB 集群)
- Source Insight
- CSS实现鼠标聚焦时边框不变,框内图片放大
- fedora 远程windows桌面
- deb,rpm格式