使用clay.js绘制一棵圆形树

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:作者:心叶时间:2019-01-23 17:55我们需要用到的库有三个:

作者:心叶

时间:2019-01-23 17:55

准备环境

我们需要用到的库有三个:

  1. clay-core :提供核心的clay.js操作;
  2. clay-2d :提供Web端2d图形绘制接口;
  3. 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方法即可!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大师之路

大师之路

赵鹏 / 人民邮电出版社 / 2007-12 / 79.00元

《大师之路:Photoshop中文版完全解析》以介绍Photoshop选区、图层、路径3大基础为主线,从色彩原理入手,注重基础知识,辅以大量实例,全面剖析了Photoshop的应用。对于其他内容,如色彩调整和各类工具的应用,也均采用与实际操作相结合的方式进行讲解。另外,还简单明了地介绍了扩展应用的领域。所附教学光盘的内容可自成一套独立的视频教学体系。本书完全按照初学者的认知角度编写,重点介绍图像原......一起来看看 《大师之路》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具