如何使用 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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
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
第九节--绑定
2006/11/16 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
Python字符串详细介绍
2015/05/09 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python模糊图片过滤的方法
2018/12/14 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python全栈之列表数据类型详解
2019/10/01 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
十一酒店活动方案
2014/02/20 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python