github页面

vue和d3的作用

绘图可分为两个步骤：

元素坐标计算数据绑定坐标计算只需要一些api，本文使用的是d3。

数据绑定可以使用d3或vue。D3是通过操纵dom实现的，这有点像jQuery。d3为数据和dom状态提出了三个概念：更新、进入和退出。有兴趣的可以看官网。本文使用vue进行数据绑定

总结：使用d3提供的api计算元素坐标，使用vue绑定数据

坐标计算

一棵树由节点和连接组成，只需要计算这两个元素的坐标

就这么干吧

绘制树有两种常见的数据结构，一种是嵌套的，另一种是平面的。如下所示：

//嵌套var treeData={name:' China '，children :[{ name : ' Beijing '，children 360[{name3360 '海淀' }，{ name 3360 '朝阳' } }，{ name : ' Shanghai '//flat var flattenData=[{ name : ' China '，parent: ''}，{ name 3: ' Beijing '，parent 3: ' China ' }，{ name 33333: '结果结构如下(列出根节点):

Var层次结构节点={ depth : 0 height : 2 parent : null x : 60y : 0，data : {name :' China '，children : []}，children :[]}；获取根节点后，使用后代()获取所有节点信息，使用链接()获取所有连接信息。节点的结构如上，连接结构如下：

Varlink={source:node，target:node}到目前为止，已经获得了所有元素的坐标

数据绑定

使用svg

树的节点是矩形文本，如下所示：

g : transform=' RootTransform ' rect : width=' NodeWidth ' : height=' NodeHeight ' : fill=' NodeFill '/The rect text : fill=' NodeTextcolor ' text-anchor=' middle '主导-基线=' middle ' :y=' node height/2 ' : x=' node width/2 ' { node。data.name}}/text/g连接是路径。

g路径：d=' getLinkPath(link)' : stroke=' linkStroke ' fill=' none ' : stroke-width=' linkStroke width '/path/gcode

说话很便宜，给我看看代码

github/vue-D3-tree-示例

摘要

以上就是如何用边肖介绍的vue d3画一棵树，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！