patition布局
来源:互联网 发布:led编辑软件 编辑:程序博客网 时间:2024/06/05 02:07
1.partition布局
首先就是先定义一个partition布局还有布局的相关访问函数
var partition=d3.layout.partition() .sort(null) .size([width,height]) .value(function(d){ re
json数据格式
然后就是加载数据,并用布局包裹数据,得到我们生成图形所需要的特定格式的数据
var nodes=partition(root); var links=partition(nodes); console.log(nodes);
控制台打印可以看出,每个node有8个字段,children,name,value,depth,x,y,dx(宽度),dy(高度),很好的定义了每个node的属性,有了这些字段便可以生成层层递进的partition布局。
2.全部代码
<style type="text/css"> .node_text{ font-size: 15px; text-anchor: middle; }</style><body></body><script type="text/javascript">var width=500,height=500;var svg=d3.select("body") .append("svg") .attr("width",width) .attr("height",height)var partition=d3.layout.partition() .sort(null) .size([width,height]) .value(function(d){ return 1; })var color=d3.scale.category20();d3.json("city_tree.json",function(error,root){ if (error) { console.log("load data find error"); } var nodes=partition(root); var links=partition(nodes); console.log(root) console.log(nodes); console.log(links); var rects=svg.selectAll("g") .data(nodes) .enter() .append("g")//我们用rect表示层层递进的布局 rects.append("rect") .attr("x",function(d){ return d.x; }) .attr("y",function(d){ return d.y; }) .attr("width",function(d){ return d.dx; }) .attr("height",function(d){ return d.dy; }) .attr("fill",function(d){ return color((d.children ? d:d.parent).name); }) .attr("stroke","#fff") .on("mouseover",function(d,i){ d3.select(this) .style("fill","yellow"); }) .on("mouseout",function(d,i){ d3.select(this) .transition() .duration(200) .style("fill",function(d){ return color((d.children ? d:d.parent).name) }); }); rects.append("text") .attr("transform",function(d){ return "translate("+(d.x+20)+","+(d.y+20)+")"; }) .attr("class","node_text") .text(function(d,i){ return d.name; })})</script>
不足:这篇文章还有很多不足之处,partition的变换形式还没有搞懂,比如说圆形的布局,如果size访问函数设置恰当我们可以生成圆形的布局,看官网例子有些也不太懂,懂得大神可以指点下。
阅读全文
0 0
- patition布局
- 关于Patition模块读取外部数据
- 用Ghost恢复系统后提示“No Valid Patition Table”
- kafka-Patition下的Leader与Follower的切换
- oracle11g自动创建分区(INTERVAL PATITION)后的定时删分区
- ubuntu手动删除swap分区后重启,出现no such patition,grub rescue解决方案
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- 布局
- < 笔记 > HTML
- 大话网络专业术语
- 修改mysql 数据库文件默认存储目录
- POJ
- Oracle序列
- patition布局
- ROS下 orbslam2 双目 (三)
- 知识点篇:1.1)不同目标,不同的设计套路(正向还是逆向)
- 人脸识别-SphereFace
- 为arcgis for js封装自己的map
- Windows mysql 出现access denied for user root @localhost
- linux 中查看info
- 9月英语总结
- Face Detection(OpenCV) Using Hadoop Streaming API