d3入门demo1-简单的树
来源:互联网 发布:曼秀雷敦肌研系列知乎 编辑:程序博客网 时间:2024/06/16 04:38
简介:
想做个家族族谱的树状呈现,看到d3很火就学着使用中。
一开始啥都不会怎么学呢,就去组织网站去逛发现d3做的还是不错的这里提供地址:https://d3js.org/
这里有直接的用例效果,点开需要的效果就可以看到聚体的代码还是很不错的。(这里有个细节d3已经更新了很多网上有很多资源需要积分啥的下下来的都是老版本不能用的,建议使用最新版本或者v3版本也可以,我这里用的是v3版本)
话不多说上效果图:
细节说明:
这里代码里不光过了相应是处理
由于最终想做成族谱当然点击对应的人需要弹出对应的跟人信息所以在每个几点上需要同时绑定单击和双击事件
d3上有更好的处理,但我英文差不想费脑子直接使用jquery的延迟时间标记的方法,
// 单击时切换子项.function click(d) {clearTimeout(clickTimeFn);clickTimeFn = setTimeout(function() {if (d.children) {d._children = d.children;d.children = null;} else {d.children = d._children;d._children = null;}update(d);},200);}function dblclick(d) {clearTimeout(clickTimeFn);alert(d.name);}
想看其他的树的代码这里提供了源码下载地址(容我无耻收点积分)
http://download.csdn.net/download/gudujohn/10124113
阅读全文
0 0
- d3入门demo1-简单的树
- 学习react.js最简单的入门demo1
- bootstrap简单的页面Demo1
- bootstrap简单的页面Demo1
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
- LokiJS入门demo1
- Spring MVC 简单demo1
- d3入门
- D3常用的简单的API记录
- D3 数据可视化的简单例子
- d3.js-做一个简单的图表
- demo1
- demo1
- demo1
- demo1
- D3 + Leaflet入门
- D3.js--入门
- D3.js入门
- 文章标题
- Cadence SPB 16. 6 安装步骤
- Linux下配置JDK及JConsole远程连接配置
- Maven实战笔记
- strcpy和strncpy库函数的实现和比较
- d3入门demo1-简单的树
- ListView和其convertView回收机制
- 用list自带的迭代器,实现边遍历边添加的功能
- Integer 类型数据的比较
- BZOJ1854: [Scoi2010]游戏
- tensorflow调试参数技巧整理
- 前端小白-css样式规则,使用方法及优先级
- 40 Interview Questions asked at Startups in Machine Learning / Data Science
- 奇异值分解(SVD)原理与在降维中的应用