D3.js的V5版本-Vue框架中使用-树状图

JavaScript030

D3.js的V5版本-Vue框架中使用-树状图,第1张

一. api简介

d3.tree(),创建一个树状图生成器

d3.tree().size(),定义树的大小

d3.hierarchy(),层级布局,需要和tree生成器一起使用,来得到绘制树所需要的节点数据和边数据

node.descendants()得到所有的节点,已经经过转换的数据

node.links(),得到所有的边,已经经过转换的数据

二.Vue中使用

*点击节点可展开收缩

直接输出html的就能换行了,在html页面展示只能用html的换行。today.getYear()+1900:today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"后面添加就行了。

本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、地图的绘制过程,参考 D3.js入门系列

温馨提示:对于有D3基础的人,本节内容能够帮助其快速掌握各图表的绘制。若没有掌握基础知识,不建议直接学习本节内容。

对图表绘制的重点内容进行了总结,下述图表绘制步骤相似,总结如下:

布局内容总结:

转换后的数据:

弧生成器计算路径(svg的path)

绘制路径path,需要调用弧生成器

或者

绘制文本text,计算路径中心位置,放入文本值

转换后的数据:

然后,使力学作用生效:

绘制节点时,使节点拖动

力导向图布局force有一个事件tick,每进行到一个时刻,都要调用它,更新的内容就写在它的监听器里就好。

数据转换

转换后的数据:

首先绘制外部圆环,使用arc弧生成器

绘制path,使用数据为groups

绘制text,使用数据为groups。首先旋转适当角度,然后向上移动外半径个长度,135-225度范围的文字倒置

然后,绘制弦,使用chord生成器生成路径

绘制path,使用数据为chords

使用数据

转换后的数据:

首先,创建对角线生成器

绘制连线,使用生成器

然后绘制节点circle。

和集群图写法基本相同,使用布局不同。

转换后的数据与集群图相同。

数据格式与树状图相同,布局如下:

数据转换写法也类似。

转换后的数据:

然后分别绘制circle和text。

数据类型与集群图、树状图、打包图相同。用于表示包含与被包含关系的。布局如下:

value设定表示分区大小的值。这里的意思是:如果数据文件中用size值表示结点大小,那么这里可写成return d.size。

数据转换写法也类似。(nodes、links)

转换后的数据:

然后绘制rect和text。rect的width、height属性分别对应数据属性dx、dy。

与前面相同。

数据转换写法也类似。(nodes、links)

转换后的数据:

分别绘制path和text。

首先创建弧生成器。

绘制path使调用弧生成器。

绘制text时要进行一下转换:

数据转换

转换后的数据:

矩形rect、坐标轴line、刻度line、文字text。

需要使用集群图布局和捆图布局。

转换后的数据:

创建放射式的线段生成器:

首先绘制path,调用线段生成器:

接着创建g,在g中绘制circle和text

绘制g需要旋转、平移:

创建堆栈图布局

数据转换

转换后的数据:

分别绘制矩形rect、圆形circle、文字text、坐标轴axis,绘制过程与柱形图相似。

创建矩阵树图布局

数据转换

转换后的数据:

分别绘制矩形rect、文字text。

更多内容: Github个人博客

备注:本文发表于 https://cnyangkui.github.io/2017/11/15/d3-graphlist/