基于D3.js实现分类多标签的Tree型结构可视化

全文共5270个字,4张图,预计阅读时间25分钟。

关键词: 可视化,D3.js,python,前端,代码

why

今天新来的实习生需要对部分分类文本进行多标签的检测,即根据已构建好的一、二级标签Excel文档,对众包平台人工标注的数据以及机器标注的数据进行评测。

此情此景,让我想起了曾经在实验做的文本多标签分类的工作,所以就想用Echart 或D3.js实现层级标签可视化为一个Tree的结构,方便实习生们查阅,提高工作效率。

说干就干!

How

处理数据

首先,找一个标准的基于D3.js实例程序,明确一下我们的工作目标以及步骤[数据的格式+前端代码]。

看一下需要将我们目前的结构化数据:

标准的可以被D3.js加载的数据格式:

加载之后的Tree型结构效果图:

以上的Tree型图就是我们想要达到的目标。

我们需要将我们的数据,转换为D3.js可以加载的标准数据。

我决定使用python编写处理的脚本:编写的逻辑完全是自己瞎想的,如果各位有什么更好、更标准的方法,欢迎指出。

处理之后的结果存储到本地的文件3tag.csv中:

一定要完全按照标准的D3.js的格式处理的。

注意事项:

所以,整个处理的过程中,其实最麻烦的就是数据的处理了。

前端的web界面

标准数据有了,剩下的就是需要一个前端的web界面,这个代码在上面的示例页面中已经有了,只需要我们自己替换为我们的数据源就可以了,我还是贴出自己的代码吧。

RESULT

最后,展示一下我们的成果:

以上就是本次层级标签可视化的实践,以后大家工作中再遇到多标签的问题,可以使用该方法快速的实现Tree型结构的可视化了,方便阅读与理解。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181025A1IFES00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券