如何使用 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 变量命名规则
Sep 23 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
js中跨域方法原理详解
Jul 19 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
js实现分页功能
May 24 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 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
我的php学习笔记(毕业设计)
2012/02/21 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python字典排序的方法
2019/10/12 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
11月红领巾广播稿
2014/01/17 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
安全生产先进个人总结
2015/02/15 职场文书
涨价通知怎么写
2015/04/23 职场文书
倡议书的格式写法
2015/04/28 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
python解析json数据
2022/04/29 Python