基于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型结构的可视化了，方便阅读与理解。