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

FingerLiu 发布于2019-08-30 15:55 / 1334人阅读

摘要：需要说明目前，开发环境已经准备好了，因为绘制树图，我们需要模拟数据，你可以在这里下载数据我们要绘制一棵圆形树，一点点显示，你可以最终代码，查看效果然后在浏览器中打开即可查看效果。余下的就是绘制图形了。

作者：心叶
时间：2019-01-23 17:55

温馨提示：clay.js已经停止维护，项目迁移到https://github.com/yelloxing/...

准备环境

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

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中引入他们：

我们推荐你在实际开发中通过require方式使用，这里是为了演示方便。

需要说明

目前，开发环境已经准备好了，因为绘制树图，我们需要模拟数据，你可以在这里下载数据：

https://github.com/chen351012...

我们要绘制一棵圆形树，一点点显示，你可以clone最终代码，查看效果：

git clone https://github.com/chen351012/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 + "]");
     $$("")
          .css({ "fill": "none", "stroke": "gray" })
          .attr("d", bezier(+pnode.attr("left"), +pnode.attr("top"), data.left, data.top))
          .appendTo(target)
 }

根节点没有父亲，不需要绘制连线。这里绘制连线的方法由clay-2d提供。

// 绘制结点
$$("")
    .attr("cx", data.left).attr("cy", data.top).css("fill", "#ea779e")
    .appendTo(target);

至此，就结束了，你可以在这里查看完整代码：https://github.com/chen351012...

后记

你可以看出来，clay-core提供了绘图中最基本的操作，比如对结点的增删改查和基本的计算等；而如果我们需要绘制常见的图形，比如扇形或这里的曲线等，由clay-2d提供（后期绘制3d会由clay-3d提供）；而在绘制复杂图形的时候，比如这里的tree，我们需要计算每个结点的位置，就由clay-chart提供。

这样的好处是灵活性高，比如这里，如果我们想使用canvas2D绘图，只需要修改绘图方法为clay-2d中提供的canvas2D方法即可！

GPU云服务器云服务器一棵一棵树用c语言打出一棵树圆形菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117287.html

数据可视化之clay:设计思想和建立初衷

摘要：然而，的设计思想和他们不同，是包容而非竞争。建立目的首先，本项目是为了端数据可视化而建立的，如果用更通俗的话说，就是为了方便使用绘制各种和图形来反映统计的数据，并且绘制的图形是可交互的。作者：心叶时间：2018-05-01 19:28 clay项目Github地址：https://github.com/yelloxing/... showImg(https://segmentfaul...

XFLY 2019-08-29 17:20 评论0 收藏0
利用JavaScript在canvas中画一棵树

摘要：看到这个网页中在里绘制一棵树，感到很有趣，于是仿照他的源代码，同样也利用生成了一棵树。在程序中需要两个对象。中存放当前正在绘制的这一段树枝的信息，中存放的是所有的树枝。对集合内的每个元素依次进行处理这样我们就完成了在上绘制一棵树的工作。看到这个网页中在canvas里绘制一棵树，感到很有趣，于是仿照他的源代码，同样也利用JavaScript生成了一棵树。在程序中需要两个对象Branc...

sydMobile 2019-08-19 17:20 评论0 收藏0
CSS的工作过程

摘要：总的来说，过程分以下几步处理标记并构建树。不说这些题外话了，我们下面来画几个图，帮助大家更清楚的理解的工作过程。在平时的工作中，可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面，那么仔细想想一个资深的前端从业者，是否需要知道他的工作原理和过程呢，技术这种东西，当然是我们了解的越多，才会使用的越得心应手。那么下面，我就为大家来介绍一下CSS的工作过程把。有个经典的问题：从...

SegmentFault 2019-08-02 16:10 评论0 收藏0
CSS的工作过程

摘要：总的来说，过程分以下几步处理标记并构建树。不说这些题外话了，我们下面来画几个图，帮助大家更清楚的理解的工作过程。在平时的工作中，可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面，那么仔细想想一个资深的前端从业者，是否需要知道他的工作原理和过程呢，技术这种东西，当然是我们了解的越多，才会使用的越得心应手。那么下面，我就为大家来介绍一下CSS的工作过程把。有个经典的问题：从...

CarterLi 2019-08-30 15:43 评论0 收藏0