d3.js力导向图节点设置为图片

设置方法如下：

1、首先打开节点设置，选择固定节点。好雀乱

2、保存当前岁埋节点后，点击左友档上角的输入，另存为pdf文件。

3、将pdf文件保存在桌面即可。

var force = d3.layout.force()//layout将json格式转化为力学袭袜返图可用的格式

.nodes(d3.values(nodes))//设定节好闹点数组

.links(links)//设定连线数组

.size([width, height])//作用域的大小

.linkDistance(180)//连接线长度

.charge(-1500)//顶点的电荷数。该参数决定是拍饥排斥还是吸引，数值越小越互相排斥

.on("tick", tick)//指时间间隔，隔一段时间刷新一次画面

.start()//开始转换

本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、地图的绘制过程，参考 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/

---