D3.js — 思维导图
http://www.lai18.com/content/508828.html
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状。在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”。因此,可以凭借这两种布局来制作思维导图。
1. 构造思路
树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下。有一个root对象:
- {
- name: "node1",
- children:
- [
- { name: "node2" },
- { name: "node3" }
- ]
- }
经树状图布局转换后,得到的节点数组nodes如下:
- [
- {
- name: "node1",
- children:
- [
- { name: "node2" },
- { name: "node3" }
- ]
- },
- { name: "node2" },
- { name: "node3" }
- ]
下图是上述节点数组的示意图。由于 node1 具有子节点,可作为开关使用,点击 node1 才会展现 node2 和 node3。
问题是:怎样制作一个“开关”,使得点击树状图中的某个节点时,树状图更新并显示出被点击节点的子节点。
我们知道,树状图的层级关系是由每一个对象的children属性决定的(当然,也可以通过tree.children()修改这一点),也就是说,如果某一个节点的children值为空,则再次用布局计算时,其子节点就不会进入节点数组nodes了。例如,将root改为:
- {
- name: "node1",
- children: null
- }
则得到的节点数组nodes里将没有node2和node3节点。也就是说,“开关”只要将被点击节点的children设置为null即可。但是,由于将来可能还要用到children节点,可设一临时变量_children保存此值,例如:
- {
- name: "node1",
- children: null
- _children: /* 临时变量 */
- [
- { name: "node2" },
- { name: "node3" }
- ]
- }
树状图布局不会认为_children是保存子节点的变量,只把它看做是一般的变量而保存下来,因此节点数组nodes里只有一个节点。根据上面的思路,写一个开关切换函数如下。
- //切换开关,d 为被点击的节点
- function toggle(d){
- if(d.children){
- //如果有子节点
- d._children = d.children; //将该子节点保存到 _children
- d.children = null; //将子节点设置为null
- }else{
- //如果没有子节点
- d.children = d._children; //从 _children 取回原来的子节点
- d._children = null; //将 _children 设置为 null
- }
- }
每次开关状态切换时,都要重新调用布局重新计算节点的位置,也就是说,要有一个重绘函数能够处理数据发生更新的情况。这就又要用到【 选择集与数据 - 第 5 章 】的处理模板,重绘函数的部分代码如下,尤其要注意开关函数是如何被使用的。
- //重绘函数
- function redraw(source){
- //重新计算节点和连线
- var nodes = tree.nodes(root);
- var links = tree.links(nodes);
- //获取节点的update部分
- var nodeUpdate = svg.selectAll(".node")
- .data(nodes, function(d){ return d.name; });
- //获取节点的enter部分
- var nodeEnter = nodeUpdate.enter();
- //在给enter部分添加新的节点时,添加监听器,应用开关切换函数
- nodeEnter.append("g")
- .on("click", function(d) {
- toggle(d);
- redraw(d);
- });
- /***************
- 省略
- ***************/
- }
每一个被新添加的节点,都会响应click事件。当某个节点被点击时,如果它具有子节点,则在开关切换函数的作用下,root对象被修改了,然后调用重绘函数后,新的树状图将被绘制。如此一来,树状图具有开关功能,也就可以当做思维导图使用了。
2. 制作思维导图
首先,要有一个具有层级关系的 JSON 文件,本文使用: learn.json
其次,依次创建树状图布局、对角线生成器等,用于绘制树状图。
然后,实现最关键的重绘函数,函数声明如下:
- function redraw(source)
只有一个参数source,这是被点击的节点,如果该节点原来为闭合状态,点击后其子节点将显现,如果原来为打开状态,点击后其子节点将隐藏。函数体的实现,分为四个步骤:
2.1 调用布局,计算节点和连线数组
树状图布局的tree.nodes()返回节点数组,tree.links()返回连线数组。其中,对节点的y坐标重新计算,使其只与节点的深度有关,由于后期绘制节点和连线时要将x和y坐标对调,因此这里重计算的实际上是水平方向的坐标。
- //应用布局,计算节点和连线
- var nodes = tree.nodes(root);
- var links = tree.links(nodes);
- //重新计算节点的y坐标
- nodes.forEach(function(d) { d.y = d.depth * 180; });
之所以重新计算y坐标,是为了当数据更新(用于点击节点)时,保证树状图的结构不要发生太大的变化,如此看起来比较自然。
2.2 分别处理节点的update、enter、exit三部分
在svg里选择当前所有的节点,使其与节点数组nodes绑定,绑定时要设定一个键函数。键函数里直接返回d.name,当节点数组发生更新时,新节点要与旧节点在名称上相对应。
- //获取节点的update部分
- var nodeUpdate = svg.selectAll(".node")
- .data(nodes, function(d){ return d.name; });
- //获取节点的enter部分
- var nodeEnter = nodeUpdate.enter();
- //获取节点的exit部分
- var nodeExit = nodeUpdate.exit();
先处理enter部分,即添加节点。节点的构成为:分组元素里有一个圆表示节点,还有一个文字元素表示节点的名称。元素结构如下:
本例中,每一个新添加的节点都将缓慢地过渡到自己本身的位置,如此更具有友好性。因此,新节点的初始位置都设定在source节点处,确切的说是重回之前source节点的位置,该坐标是保存在source.x0和source.y0里的。另外,对于每一个新节点,设置的半径为0,设置为完全透明,接下来在处理update部分的时候会将这些新节点过渡到正常状态的。下图展示了处理enter部分和update部分时如何节点的位置时如何确定和过渡的。
处理enter部分的代码如下。
- //1. 节点的 Enter 部分的处理办法
- var enterNodes = nodeEnter.append("g")
- .attr("class","node")
- .attr("transform", function(d) {
- return "translate(" + source.y0 + "," + source.x0 + ")";
- })
- .on("click", function(d) {
- toggle(d);
- redraw(d);
- });
- //省略添加圆和文字部分
然后处理update部分,将所有节点(包括在enter部分新添加的节点)都缓缓过渡到新的位置。由于新的节点数组是与节点选择集绑定在一起的,因此d.x和d.y里保存的就是新的坐标值。
- //2. 节点的 Update 部分的处理办法
- var updateNodes = nodeUpdate.transition()
- .duration(500)
- .attr("transform", function(d) {
- return "translate(" + d.y + "," + d.x + ")";
- });
最后处理exit部分,需要删除的节点的位置缓缓过渡到其父节点处。
- //3. 节点的 Exit 部分的处理办法
- var exitNodes = nodeExit.transition()
- .duration(500)
- .attr("transform", function(d) {
- return "translate(" + source.y + "," + source.x + ")";
- })
- .remove();
2.3 分别处理连线的update、enter、exit三部分
在svg中选择所有的连线,绑定连线数组links,由此可获得连线的update、enter、exit部分。
- //获取连线的update部分
- var linkUpdate = svg.selectAll(".link")
- .data(links, function(d){ return d.target.name; });
- //获取连线的enter部分
- var linkEnter = linkUpdate.enter();
- //获取连线的exit部分
- var linkExit = linkUpdate.exit();
对于连线的enter部分,是插入路径元素path,路径由对角线生成器获取,对角线的起点和终点坐标都是(source.x0, source.y0)。
对于连线的update部分,将所有的连线的位置(对角线的起点和终点)更新到新的位置,即目前绑定的数组links里保存的位置。
对于连线的exit部分,令其缓缓过渡到当前的source点,再移除。
- //1. 连线的 Enter 部分的处理办法
- linkEnter.insert("path",".node")
- .attr("class", "link")
- .attr("d", function(d) {
- var o = {x: source.x0, y: source.y0};
- return diagonal({source: o, target: o});
- })
- .transition()
- .duration(500)
- .attr("d", diagonal);
- //2. 连线的 Update 部分的处理办法
- linkUpdate.transition()
- .duration(500)
- .attr("d", diagonal);
- //3. 连线的 Exit 部分的处理办法
- linkExit.transition()
- .duration(500)
- .attr("d", function(d) {
- var o = {x: source.x, y: source.y};
- return diagonal({source: o, target: o});
- })
- .remove();
2.4 保存当前的节点坐标
当用户点击节点后,数据发生更新,即每个节点的坐标要发生更新。但是,在对节点和连线进行过渡操作的时候,需要使用到更新前的数据(source.x0和source.y0)。因此,每一次调用重绘函数,都要将当前节点的位置保存下来。
- nodes.forEach(function(d) {
- d.x0 = d.x;
- d.y0 = d.y;
- });
x和y坐标分别保存在x0和y0中,在调用redraw(source)时,被点击的节点被作为参数传到了重绘函数里,因此source.x0和source.y0里保存的是被点击之前节点的坐标。
3. 结果
结果如下图所示,点击节点可以展开子节点。
源代码请单击以下链接,邮件查看源代码:
http://www.ourd3js.com/demo/G-10.0/mind.html 谢谢阅读。
文档信息
版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
发表日期:2015 年 6 月 27 日
更多内容: OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
D3.js — 思维导图相关推荐
- Node.js思维导图
构建于Chrome的V8引擎之上. Google Chrome的V8引擎是目前公认的解析执行js代码最快的. Node.js的作者把Google Chrome中的V8引擎移植了出来,开发了一个独立的J ...
- vue.js思维导图笔记
- Javascipt超详细版思维导图+基础语法导航
JS思维导图 JS基础导航 JavaScript(一)--变量,数据类型及转换.运算符和逻辑结构 Javascript(二)--函数与作用域 JavaScript(三)--对象与数组及API Java ...
- 22款 思维导图软件开源软件
思维导图软件 XMind XMind是一款同样开源且跨平台的思维导图软件,XMind 在功能上一点也不逊色于 FreeMind,某些方面,XMind 甚至更加具有优势.XMind 支持中文简繁体. X ...
- d3.js mysql_D3.js画思维导图(转)
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
- js map 排序_数组方法写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图)...
前言 最近和女友,咳咳...(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方 ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- javascript高级程序设计---js事件思维导图
绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象 转载于:https://www.cnb ...
- 使用js实现思维导图
本文主要阐述使用js实现思维导图的关键技术点,如果还不知道什么是思维导图的同学,请自行度娘.以下是demo和源码的传送门: demo:http://sources.ikeepstudying.com/ ...
最新文章
- git.exe 启动 慢_拳头:今年将修复英雄联盟客户端 启动时间降到19秒
- Linux内核I/O系统报错日志与硬盘故障对应关系
- [Issue Fixed]-Pulse r9.1 embedded browser install failure
- 前端基础之JavaScript_1(二)
- 服务发现与健康监测框架Consul-DNS转发的应用
- mysql高级查询 二_MySQL高级查询(二)
- ln创建、删除软/硬链接
- “请别再说‘华商网不重视技术’”
- 快速排序方法——python实现
- 图像卷积详细解释 常用卷积核解释说明
- Aria2 - OS X 下载百度云资源神器
- Javaweb重要知识点总结(六)常见的前端框架
- 小游戏吃饭,睡觉,打豆豆,亲
- MES系统是什么?对企业来说有何好处?
- OUU益生菌精耕胃肠健康,获奖天猫国际微生态创新大会
- 法线变换详解 和 3D 变换中法向量变换矩阵的推导
- CTFHub 工控组态分析 WP
- 开源之道解读 Liunx 基金会开源办公室调查报告
- linux mips 时钟中断,Linux内核中地时钟中断.pdf
- 串口设置波特率linux函数接口,Linux下串口编程之一:基础设置函数
热门文章
- 只要5秒就能“克隆”本人语音!美玉学姐不再查寝,而是吃起了桃桃丨开源
- 通过LWIP 的RAW API 进行与服务器的UDP通信(stm32 f103 -- enc28j60)
- 网站建设对企业会有什么影响
- 打印正常的九九乘法表与下三角的九九乘法表(可相互对照)
- mysql中井号的作用_URL 链接中 井号#、问号?、连接符 分别有什么作用?
- 【PTA|Python】浙大版《Python 程序设计》题目集:第七章
- 独立产品灵感周刊 DecoHack #050 - 基于 ChatGPT 的 API 能做什么产品
- php excel 类,【PHP】PHPExcel类 excel常用操作小结
- TypeError: ‘BaseQuery‘ object is not callable问题解决
- 第二章--第三节 成本函数和损失函数是什么鬼