如何使用 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的类继承
Mar 05 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP合并静态文件详解
2014/11/14 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
json字符串传到前台input的方法
2018/08/06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
浅析python中的分片与截断序列
2016/08/09 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Python中Yield的基本用法
2020/10/18 Python
python 实用工具状态机transitions
2020/11/21 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
行政专员工作职责
2013/12/22 职场文书
社区母亲节活动方案
2014/03/05 职场文书
实名检举信范文
2015/03/02 职场文书
兴趣班停课通知
2015/04/24 职场文书
消防验收申请报告
2015/05/15 职场文书
匿名信格式范文
2015/05/27 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python