如何使用 vue + d3 画一棵树
vue 和 d3 的角色
画图可分为两步：
- 元素坐标计算
- 数据绑定
坐标计算只需要一些 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
总结
以上所述是小编给大家介绍的如何使用 vue + d3 画一棵树，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
使用D3.js+Vue实现一个简单的柱形图
最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表.这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图.不了解D3的请移步D3 Data-Driven Documents,它是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最流行的可视化库之一. 说明 采用Vue-cli脚手架快速搭建项目 npm 安装 D3 实现一个简单的柱形图 项目搭建 使用vue-cli搭建单页应用: # 安装 vue-cli $ npm install --gl
-
在Vue项目中使用d3.js的实例代码
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现
-
如何使用 vue + d3 画一棵树
github pages vue 和 d3 的角色 画图可分为两步: 元素坐标计算 数据绑定 坐标计算只需要一些 api,本文使用 d3. 数据绑定既可以借助 d3,也可以使用 vue.d3 通过操作 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update.Enter.Exit,感兴趣的可以看官网.本文使用 vue 做数据绑定 总结:使用 d3 提供的 api 计算元素坐标,使用 vue 进行数据绑定 坐标计算 一棵树由节点和连接构成,只需要计算出这两种
-
纯js实现画一棵树的示例
用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body { width: 1000px; height: 570px;
-
优雅的使用javascript递归画一棵结构树示例代码
递归和尾递归 简单的说,递归就是函数自己调用自己,它做为一种算法在程序设计语言中广泛应用.其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解.一般来说,递归需要有边界条件.递归前进阶段和递归返回阶段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 但是作为一个合格的程序员,我们也因该知道,递归算法相对常用的算法如普通循环等,运行效率较低.因此,应该尽量避免使用递归,除非没有更好的算法或者某种特定情况,递归更为适合的时候.在递归调用的过程当中系统为每一层的
-
Python+Turtle动态绘制一棵树实例分享
本文实例主要是对turtle的使用,实现Python+turtle动态绘制一棵树的实例,具体代码: # drawtree.py from turtle import Turtle, mainloop def tree(plist, l, a, f): """ plist is list of pens l is length of branch a is half of the angle between 2 branches f is factor by which bra
-
Vue编译器AST抽象语法树源码分析
目录 引言 baseCompile主要核心代码 如何写一个程序来识别 Token parse 函数解析模板字符串 引言 接上篇 Vue编译器源码分析compile 解析 baseCompile主要核心代码 // `createCompilerCreator` allows creating compilers that use alternative // parser/optimizer/codegen, e.g the SSR optimizing compiler. // Here we
-
Vue编程三部曲之模型树优化示例
目录 前言 为什么要做优化? optimize isStaticKey isPlatformReservedTag HTML 保留标签 SVG 保留标签 标记静态节点 判断节点状态并标记 基础元素节点的处理 标记静态根 什么节点会成为静态根? 为什么子节点不能仅为一个文本节点? 标记静态节点和静态根节点有什么区别? 总结 前言 对编译过程的了解会让我们对 Vue 的指令.内置组件等有更好的理解.不过由于编译的过程是一个相对复杂的过程,我们只要求理解整体的流程.输入和输出即可,对于细节我们不必抠太
-
vue.js实例对象+组件树的详细介绍
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方
-
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
复制代码 代码如下: //只要要在treepanel中配置一下viewConfig即可,如果是两棵树之间,两棵树都要配置 viewConfig:{ plugins :{ ptype:'treeviewdragdrop', appendOnly:true //只能拖着带非叶节点上 }, listeners:{//监听器 drop:function(node,data,overModel,dropPosition,options){ //ajax的操作
-
python实现画一颗树和一片森林
本文实例为大家分享了python画一颗树和一片森林的具体代码,供大家参考,具体内容如下 实现效果 代码在这里 from turtle import Turtle def tree(plist, l, a, f): """ :param plist:画笔列表,指数型增加 :param l: 画笔的长度,同时也是递归终止条件,注意下面的引用中是字母l,不是数字1 :param a: 分开的两个树杈之间夹角的一半,固定值65° :param f: 子树与父树的比值 :return:
-
python3实现用turtle模块画一棵随机樱花树
废话不多说了,直接上代码吧! #!/usr/bin/env python # coding=utf-8 # 画一棵樱花 import turtle import random from turtle import * from time import sleep # 画樱花的躯干(60,t) def tree(branchLen,t): sleep(0.0005) if branchLen >3: if 8<= branchLen <=12: if random.randint(0,2)