如何使用 vue + d3 画一棵树


Posted in Javascript onDecember 03, 2018

github pages

如何使用 vue + d3 画一棵树

vue 和 d3 的角色

画图可分为两步:

  1. 元素坐标计算
  2. 数据绑定

坐标计算只需要一些 api,本文使用 d3。

数据绑定既可以借助 d3,也可以使用 vue。d3 通过操作 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update、Enter、Exit,感兴趣的可以看官网。本文使用 vue 做数据绑定

总结:使用 d3 提供的 api 计算元素坐标,使用 vue 进行数据绑定

坐标计算

一棵树由节点和连接构成,只需要计算出这两种元素的坐标

即可

画一棵树常见的有两种数据结构,一种是嵌套的,一种是扁平的。如下:

// 嵌套的
var treeData = {
 name: '中国',
 children: [{
  name: '北京',
  children: [{
   name: '海淀'
  }, {
   name: '朝阳'
  }]
 }, {
  name: '上海'
 }]
};
// 扁平的
var flattenData = [{
 name: '中国',
 parent: ''
}, {
 name: '北京',
 parent: '中国'
}, {
 name: '上海',
 parent: '中国'
}, {
 name: '海淀',
 parent: '北京'
}, {
 name: '朝阳',
 parent: '北京'
}]

对于嵌套的数据,使用 d3.hierarchy() 计算坐标,对于扁平的,使用 d3.stratify()。得到的结构如下(列举根节点):

var hierarchyNode = {
 depth: 0
 height: 2

 parent: null
 x: 60
 y: 0,
 data: {
  name: "中国",
  children: [] 
 },
 children: []
};

得到根节点后使用 descendants() 获取所有节点信息,links() 获取所有连接信息。节点的结构如上述,连接结构如下:

var link = {
 source: Node,
 target: Node
}

至此,已获取到所有元素的坐标

数据绑定

使用 svg

树的节点就是 rect + text,如下:

<g :transform="rootTransform">
 <rect :width="nodeWidth" :height="nodeHeight" :fill="nodeFill"></rect>
 <text :fill="nodeTextColor" text-anchor="middle" dominant-baseline="middle"
  :y="nodeHeight / 2" :x="nodeWidth / 2">{{node.data.name}}</text>
</g>

连接就是 path,如下:

<g>
 <path :d="getLinkPath(link)" :stroke="linkStroke" fill="none" :stroke-width="linkStrokeWidth"></path>
</g>

code

talk is cheap show me the code

github/vue-d3-tree-example

总结

以上所述是小编给大家介绍的如何使用 vue + d3 画一棵树,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Ajax基础知识详解
Feb 17 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
Vue底层实现原理总结
Feb 17 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
Vue实现开心消消乐游戏算法
Oct 22 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
You might like
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
laravel请求参数校验方法
2019/10/10 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python3注册全局热键的实现
2020/03/22 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python中count函数知识点浅析
2020/12/17 Python
Python操作Excel的学习笔记
2021/02/18 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
一份Java笔试题
2012/02/21 面试题
学校门卫管理制度
2014/01/30 职场文书
环保建议书200字
2014/05/14 职场文书
公司委托书怎么写
2014/08/02 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL