Alex的博客

本博客的文章均为原创,是本人从事行业多年来所遇见一些小问题的解决心得,希望可以帮助到大家!



Treant.js——一个树形结构图javascript库

Treant.js简介

Treant.js是一个JavaScript库,用于在HTML中构造树形结构图。它利用CSS和SVG的结合,可以通过简单的代码编写,便可以绘制出一个非常美观又具有交互性的树形结构。并且我们可以通过对其默认的CSS文件的修改以达到我们预期的样式效果。



Treant.js文件结构

Treant/
      ├── Treant.min.js
      ├── Treant.css
      ├── vendor/raphael.js
      ├── perfect-scrollbar/
      |  ├── jquery.min.js
      |  ├── jquery.mousewheel.js
      |  ├── perfect-scrollbar.js
      |  └── perfect-scrollbar.css
      ├── examples/
      |  └── …
      └── api-manual/
         └── …


Treant.js基本使用

一个基本的HTML模板,只需要引入相应的javascript文件以及CSS文件即可,例如:

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”utf-8”/>
    <title></title>
    <!– stylesheets –>
    <link rel=”stylesheet” href=”Treant.css” type=”text/css”/>
</head>
<body>
    …
    <!– javascript –>
    <script src=”vendor/raphael.js”></script>
    <script src=”Treant.min.js”></script>
</body>
</html>

它支持数组格式的数据,也同样支持JSON格式的数据。其API文档可参见:http://fperucic.github.io/treant-js/

笔者使用该库完成的一个可视化组件:对于“人们对于医疗改革的看法(同意与不同意)”问题的卡方自动交叉检验算法结果可视化。其具有可视化交互效果。


官方插件地址:http://fperucic.github.io/treant-js/


浏览1738  评论7  Alex于 2017-4-25 17:56
评论
盛夏的回忆 发表于2017-11-10 10:32
请问生成的树状图可以导出么?图片或者pdf之类的回复
Alex 发表于2017-11-16 09:38
@盛夏的回忆:你直接浏览器保存为图片不就好了回复
kevin 发表于2017-11-02 16:36
怎么让他左右展示而不是上下回复
Alex 发表于2017-11-03 10:56
@kevin:这个插件我没怎么用过你可以去官网看看回复
彩虹 发表于2017-09-01 16:44
这个js能兼容ie8么?回复
Alex 发表于2017-09-03 10:38
@彩虹:这个没测试过你可以自己下载试试回复
彩虹 发表于2017-09-04 08:43
@Alex:额,不兼容啊,有没有什么兼容ie8的方法啊,回复
发言