共计 2194 个字符，预计需要花费 6 分钟才能阅读完成。
作者：心叶时间：2019-01-23 17:55
准备环境
我们需要用到的库有三个：
clay-core：提供核心的 clay.js 操作；
clay-2d：提供 Web 端 2d 图形绘制接口；
clay-chart：提供绘制常用表格的数据计算方法，这里是 tree。
你可以去 github 上下载最新的发布版本并引入，或者通过 npm install 安装并通过 require 的方式使用（具体的你可以在 github 上看到详细的说明）。
这里，我们选择 npm 管理，然后引入 node_modules 中的文件：
npm install –save clay-core clay-2d clay-chart
这样，我们就准备好了 npm 包，接着在 html 中引入他们：
<script src=”../node_modules/clay-core/build/clay-core.js”></script>
<script src=”../node_modules/clay-2d/build/clay-2d.js”></script>
<script src=”../node_modules/clay-chart/build/clay-chart.js”></script>
我们推荐你在实际开发中通过 require 方式使用，这里是为了演示方便。
需要说明
目前，开发环境已经准备好了，因为绘制树图，我们需要模拟数据，你可以在这里下载数据：
https://github.com/yelloxing/…
我们要绘制一棵圆形树，一点点显示，你可以 clone 最终代码，查看效果：
git clone https://github.com/yelloxing/eChart.js
cd eChart.js
npm install
然后在浏览器中打开 ./src/svg.tree.rotate.html 即可查看效果。
计算结点位置
var tree=$chart.tree({
// 目标树
“type”: “circle”,
“radius”: 300, “cx”: 350, “cy”: 350,
// 数据结构
“root”: initTree => initTree,
“child”: parentTree => parentTree.children,
“id”: treedata => treedata.name
});
第一步，如上面所示，配置树图的计算对象，根据原始数据计算每个结点的位置（具体的配置参数，你可以在 clay-chart 项目的文档中查看）。
var result=tree(program.data);
第二步，使用刚刚获取的树图计算对象，传递原始数据，获取包含了结点位置等信息的结果 result。
余下的就是绘制图形了。
SVG 结点绑定
因为这里我们选择的是 svg 绘图，在绘制前，我们可以使用 data 方法，把数据和 g 标签关联起来，这样绘图更容易：
var gs=$$(‘svg’).find(‘g’).data(result.node).enter(‘g’).appendTo(‘svg’);
上面就把每个结点的信息挂载到 g 标签中，具体的 api 你可以查看 clay-core 的文档。
绘图
最后，我们来绘图吧！
gs.loop(function (data, index, target) {
window.setTimeout(function () {
// 在这里绘制结点和连线条
}, index * 50);
});
gs 就是和结点挂载起来的 g 标签对象，上面的 loop 方法会在每一个 g 标签上启动传递的函数，函数有三个参数，在这里分别是：
data：包含位置信息的结点数据
index：数据序号，也就是是第几个结点
target：当前操作的 g 标签对象（类似是 clay 对象）
我们发现，上面二个结点间绘制图形相差 50ms，也就有了动画效果，下面在里面添加结点和连线条的绘制方法即可：
// 绘制连线
if (data.pid) {
var pnode = $$(‘[id=’ + data.pid + ‘]’);
$$(‘<path>’)
.css({“fill”: “none”, “stroke”: “gray”})
.attr(‘d’, bezier(+pnode.attr(‘left’), +pnode.attr(‘top’), data.left, data.top))
.appendTo(target)
}
根节点没有父亲，不需要绘制连线。这里绘制连线的方法由 clay-2d 提供。
// 绘制结点
$$(‘<circle stroke-width=”1″ fill=”red” r=”3″>’)
.attr(‘cx’, data.left).attr(‘cy’, data.top).css(“fill”, “#ea779e”)
.appendTo(target);
至此，就结束了，你可以在这里查看完整代码：https://github.com/yelloxing/…
后记
你可以看出来，clay-core 提供了绘图中最基本的操作，比如对结点的增删改查和基本的计算等；而如果我们需要绘制常见的图形，比如扇形或这里的曲线等，由 clay-2d 提供（后期绘制 3d 会由 clay-3d 提供）；而在绘制复杂图形的时候，比如这里的 tree，我们需要计算每个结点的位置，就由 clay-chart 提供。
这样的好处是灵活性高，比如这里，如果我们想使用 canvas2D 绘图，只需要修改绘图方法为 clay-2d 中提供的 canvas2D 方法即可！
