InteractiveGraph 实现酷炫关系图谱以前瞻

本文代码和数据等，会等下一篇实战文章更新后一块儿放在 github/DesertsX 上，敬请期待！

前言

话说以前片刻老哥（群主/组织负责人之一）在 ApacheCN 中文开源组织 的机器学习群（qq 群：629470233）里问我下面这个项目（见于：安利一个惊艳的红楼梦可视化做品）研究的如何，我答曰那时安利事后仅分析了下该红楼梦关系图谱的 json 数据，并曾兴致高昂地写下左手读红楼梦，右手写BUG，闲快活一文。

再是不久前爬取明星相互关系的数据（仍是那句话数据质量不必定多高，仅为练手），以供 neo4j 上手操练之用，并写有详细的入门教程： 一文教你用 Neo4j 快速构建明星关系图谱，而 neo4j 是赫然写在 grapheco/InteractiveGraph 这一开源项目的 github 介绍中的。

除此以外，再无有过多研究，只说来日因缘际会再去看看。虽然有由于不懂前端等技术、难以上手“官方教程”而推脱往后再研究之意，但或许更多地是古柳深信没准哪一天就有人助我填补了自身浅薄的知识与酷炫的开源项目之间的鸿沟，而后就像往昔文章中经常提到的“因缘际会”四字通常，一切天然而然地得以解决，新技能得以 get 了！

股票图谱

正所谓：“无巧不成书”，世上就果然有那么巧的事，没几日就看到利用 Tushare 数据实现知识图谱效果这篇新近出炉的文章（感谢做者提供完整代码和数据，下文将补上本身实践明星关系图谱的代码和数据后，统一开源供你们学习），原做者调用 Tushare API 接口，拿到股票及其最基础的属性数据，如股票所属地区 area、所属工业类别 industry 和所属板块 market 等。

将其转换成开源项目 grapheco/InteractiveGraph 所需的数据格式（上述代码均在 stock-demo.py 中，若是只是关心可视化结果，能够略过上述步骤，由于转换后的数据已经存在于webapp\static\stock_graph.json） ，运行 webapp\app_run.py ，打开 http://127.0.0.1:5000/graph/relation?stock1=平安银行&stock2=招商银行 就能看到漂亮的图谱，可改为其余股票名称查看效果。

以上，差很少就是所有流程了，若是你只是想了解下该项目是如何实现的，其实知道这么多就够了，真的很是简单，前端的东西都是现成的，只须要准备好数据，套用一下模板，就能拿出去“装逼”了。

热身一下

而若是你想更进一步应用到本身的数据上，而且像开头红楼梦项目同样加上图像的话（有图真的灵动好看不少），那么下面的实战部分将帮你实现这个愿望！

首先是用片刻老哥手动构造的关于 ApacheCN 中文开源组织 的小数据集 apachecn-basic.csv 热热身，固然我在此基础上将每一个人的图像由统一的绿帽头盔图（老哥对绿帽真的情有独钟呢）改为了各人的 qq 头像，并在 webapp\static\images\person\ 文件夹下保存好相应图片；

注意：这里每一行是每一个 person 对应每一个 project （如：ml/dl/kaggle）的格式，因此单个 person 可能出现不少行；

id,person,image,area,project,info
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,kaggle,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,ml,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,dl,那一抹微笑
2,片刻,static/images/person/片刻.jpg,北京,ml,世界很美，而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,kaggle,世界很美，而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,dl,世界很美，而你正好有空
3,瑶妹,static/images/person/瑶妹.jpg,北京,kaggle,瑶妹
3,瑶妹,static/images/person/瑶妹.jpg,北京,ml,瑶妹
3,瑶妹,static/images/person/瑶妹.jpg,北京,dl,瑶妹
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
5,咸鱼,static/images/person/咸鱼.jpg,北京,kaggle,咸鱼
5,咸鱼,static/images/person/咸鱼.jpg,北京,dl,咸鱼
复制代码

接着运行 apachecn-demo.py ，照旧将 csv 数据转换成所需的 json 格式， 存于webapp\static\apachecn-demo.json ，由于本次实战明星关系图谱的数据转换代码不一样于片刻老哥的，因此此处不作详细介绍，你们可自行理解，不懂的能够去找他请教（你有福了，群主叫你晚上去他房间.avi）；

固然因为后续个人版本将用 pandas 结合手头的项目手动一步步处理数据，可能不是很方便你们直接套用到本身的数据上，因此仍是推荐搞懂 apachecn-demo.py 或 stock-demo.py，更好地实现可重用的函数。

至于为何我不是按照这里的代码去处理数据，而非要自行实现，实在是由于明星相互关系的数据和上述股票和组织的数据都不太同样，具体差别后续再说。

扯回来，有了 json 数据后，其实还须要插入下面一段玄妙的 JavaScript 代码（这段 translator 打头的代码可插在 categories 和 data 之间，可去文件中查看），至于为何不一并在转换数据的代码中一并实现？

"translator": {
    "nodes": function (node) {
      //set description
      if (node.description === undefined) {
        var description = "<p align=center>";
        if (node.image !== undefined) {
          description += "<img src='" + node.image + "' width=150/><br>";
        }
        description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
        description += "</p>";
        if (node.info !== undefined) {
          description += "<p align=left>" + node.info + "</p>";
        } else {
          if (node.title !== undefined)
            description += "<p align=left>" + node.title + "</p>";
        }
        node.description = description;
      }
    },
  },
复制代码

对此菜鸡的片刻老哥和我都表示“非不为也，实不能也”，说人话就是“不会！”那也是很无奈了，只求万能的读者去实现了。

薛定谔的好消息

固然还有一个可能算是“薛定谔的好消息”是，片刻老哥去该项目的 github 提了 iusse ：是否能够将 gson 中的function 写到 html 页面的script中？

而后......而后项目贡献者可能手头正好有新版本的代码，因而顺势把代码从 InteractiveGraph 0.1.1 版本更新到了 InteractiveGraph 0.2.0！

新版本的第二个特性是 Optimize the code，结合上面 issue 里的回复应该是再也不须要在 json 里加那段玄妙的 JS 代码了，固然由于本次实践都仍是基于旧版本的，因此依然须要手动加上。

在此讲述下这个插曲，方便后来人了解区别，可资选择。

再次说回数据准备好后，只须要将要渲染的 webapp\templates\apachecn-demo-relation.html里要加载的 json 文件名改为对应的便可。

至于这个 html 文件上面并无说起，由于股票一例各方面都是匹配的，因此先行略过，等实战时须要修改了再涉及。

而回到 grapheco/InteractiveGraph 上来，原始开源项目支持三种模式：GraphNavigator、 GraphExplorer 和 RelFinder。股票一例是第三种，下图是第一种也是本次明星关系图谱将要实现的模式。

三种模式分别对应 example1.html、example2.html 和 example3.html，差异主要在于 <script>...</script> ，由于只是套用模板，因此想要那个，就复制一份对应 html 文件，改下文件名和里面 json 路径便可。

最后只需在 webapp\views\graph_view.py 里加上几行代码，使得访问对应网址时能成功渲染出相应 html 便可。没接触的前端的读者须要注意，@graph.route('') 里怎么加网址就会怎么办，好比此处对应网址就是 http://127.0.0.1:5000/apachecndemo。

@graph.route('/apachecndemo') 
# 不要写成 /graph/relation/apachecndemo 
# 不然加载图片时没法显示
def apachecndemo():
    return render_template('apachecn-demo-relation.html')
复制代码

最后运行 webapp\app_run.py，打开对应网址，就好了。虽然扯了这么多，才出现这么个破图，但一切瞎扯都是值得的。

毕竟更酷炫的明星关系图谱，差很少也就是这么个流程，先放张效果图（和略大的GIF动图）

，下一篇文章再好好讲实战吧，这篇文章也是越写越飞、越写越歪、越扯越长，光顾着调侃片刻老哥，不过也确实绕不过去了。

再者想把所有内容都塞到一篇文章里也过于冗长，这样一分为二，倒也未为不可。

小结

最后再总结下几个关键步骤：

1. 有一份 csv 或其余格式的想要图谱可视化的数据，想显示图像的，也须要准备好；
2. 写代码将其转换成所需的 json 格式（虽然文章里一直也没讲数据格式到底如何，但相应连接的文章或文件里总有涉及），并手动加上那段关键的 JavaScript 代码；
3. 修改对应 html 以及 graph_view.py 文件；
4. 运行 app_run.py ，打开对应网页便可。