如何使用 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 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
js基于div丝滑实现贝塞尔曲线
Sep 23 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
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python测试模块doctest使用解析
2019/08/10 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python中threading开启关闭线程操作
2020/05/02 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
报告会主持词
2014/04/02 职场文书
股东出资证明书范例
2014/10/04 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers