如何使用 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与CSS复习(《精通javascript》)
Jun 29 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JS 实现分页打印功能
May 16 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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来改写404错误页让你的页面更友好
2013/01/24 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
jquery实现图片切换代码
2016/10/13 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
angular动态表单制作
2018/02/23 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python实现图片文件批量重命名
2020/03/23 Python
python cs架构实现简单文件传输
2020/03/20 Python
python实现三维拟合的方法
2018/12/29 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Ajxa常见问题都有哪些
2014/03/26 面试题
文职个人求职信范文
2013/09/23 职场文书
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
数控专业自荐书范文
2014/03/16 职场文书
网站美工岗位职责
2014/04/02 职场文书
交通安全责任书范本
2014/07/24 职场文书
汽车销售员工作总结
2015/08/12 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript