如何使用 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 动态添加表格行 使用模板、标记
Oct 24 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
如何提高数据访问速度
Dec 26 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
原生js实现放大镜
Feb 20 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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
模仿OSO的论坛(二)
2006/10/09 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
简单的js计算器实现
2016/10/26 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
使用Python处理Excel表格的简单方法
2018/06/07 Python
基于Python解密仿射密码
2019/10/21 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
2014年计生标语
2014/06/23 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL