填坑填坑！

娱乐圈明星关系图谱体验地址，建议先体验后阅读本文，或者先打开链接，等阅读完没准页面也加载好了（太卡警告！或者去B站看下录制的28s超短视频：超酷炫的娱乐圈明星关系图谱，初次录，戛然而止勿喷）：
https://desertsx.github.io/yulequan-relations-graph/

在 InteractiveGraph 实现酷炫关系图谱之前瞻 一文里边扯皮边介绍了娱乐圈明星关系图谱的相关内容，并讲解了项目的关键步骤，但因为一直没有将代码上传到 GitHub，未免有些夸夸其谈，毕竟 talk is cheap, show me the code 才是正事。

在重新修改过各文件名称（因而会和前瞻一文有些出入，某些平台上可编辑的话会进行修改以确保和本文一致）、去掉无用冗余内容、加好注释说明后，代码已经开源在：DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph。

文件目录结构如下所示，用的是可在线生成的工具：Dir Tree Noter，以下对各文件作用进行简单说明。

YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph
├─ stock_csv2json.py
├─ stock_data.csv
├─ apachecn_csv2json.py
├─ apachecn_data.csv
├─ ylq_all_star_relations.csv
└─ ylq_star_infos.csv
├─ ylq_star_images_spider.py
├─ Infos_and_Data2Json.ipynb
├─ webapp
│    ├─ __init__.py
│    ├─ app_run.py
│    ├─ static
│    │    ├─ honglou.json
│    │    ├─ stock_graph.json
│    │    ├─ apachecn_graph.json
│    │    └─ ylq_star_relation_graph_v2.json
│    │    ├─ images
│    │    │    ├─ person
│    │    │    └─ star
│    │    ├─ lib
│    │    │    ├─ font-awesome-4.7.0
│    │    │    ├─ interactive-graph-0.1.0
│    │    │    └─ jquery-3.2.1
│    ├─ templates
│    │    ├─ apachecn.html
│    │    ├─ stock_relation.html
│    │    └─ yulequan-relations-graph.html
│    └─ views
│           ├─ __init__.py
│           └─ graph_view.py

项目里其实包含三个小项目：stock / apachecn / ylq_star_relation_graph，且分别保留了原始 csv 数据及转换成所需 JSON 数据的 python 代码；处理后的数据位于 webapp/static 下；对应的 html 文件位于 web/templates/ 下；如果图谱里的节点用到了图像，一律在 webapp/static/images 下，而这里的 person 对应 apachecn 项目，star 对应 ylq_star_relation_graph 项目，其中后者由 ylq_star_images_spider.py 爬取获得所需的千余张明星图像；webapp/static/lib 里用到的是 InteractiveGraph 的资源，未做修改，直接使用即可。

项目用到了 Flask，需自行安装；运行 app_run.py 启动内建的服务器，浏览器里打开http://127.0.0.1:5000，再结合 graph_view.py 里定义过的路由，就能看到三个小项目的对应展示情况。

# graph_view.py
from flask import Blueprint, request, render_template
graph = Blueprint('graph', __name__)

# http://127.0.0.1:5000/graph/relation?stock1=%E5%B9%B3%E5%AE%89%E9%93%B6%E8%A1%8C&stock2=%E6%8B%9B%E5%95%86%E9%93%B6%E8%A1%8C
@graph.route('/graph/relation', methods=['GET'])
def get_relation():
    stock1 = request.args.get('stock1')
    stock2 = request.args.get('stock2')
    return render_template('stock_relation.html', stock1=stock1, stock2=stock2)

# http://127.0.0.1:5000/apachecn
@graph.route('/apachecn')
def apachecn():
    return render_template('apachecn.html')

# http://127.0.0.1:5000/yulequan-relations-graph
@graph.route('/yulequan-relations-graph') # 不要写成 /graph/yulequan-relations-graph 否则加载头像图片时无法显示
def ylq():
    return render_template('yulequan-relations-graph.html')

三个小项目分别对应的链接：

http://127.0.0.1:5000/graph/relation?stock1=%E5%B9%B3%E5%AE%89%E9%93%B6%E8%A1%8C&stock2=%E6%8B%9B%E5%95%86%E9%93%B6%E8%A1%8C
http://127.0.0.1:5000/apachecn
http://127.0.0.1:5000/yulequan-relations-graph

以上，如果你只想运行本项目，了解这么多即可。

如果你想构建自己的关系图谱，但对数据处理和转换没有头绪，接下来的内容或许能帮助到你。本次娱乐圈明星关系图谱的数据处理和转换在 Infos_and_Data2Json.ipynb 里有详细代码和必要的说明，本文仅简述下要点。

最终想构建出怎样的关系图谱，就需要预先准备好怎样的数据。

例如当点击明星节点时，想呈现哪些详细介绍内容，就需要在爬取数据时解析和存储对应的数据，本次仅为练手，所以只用到了明星个人主页里很少的数据，以刘烨为例（刘烨个人主页），其 infos 就是 ['中国吉林', '75 KG', '1978-03-23']。

明星关系图谱里涉及明星类和地区类两类节点，而查看爬取完的数据，发现地区数据比较杂乱，还需进行处理。

这里是古柳的一种处理方式，大家可自行DIY：海外的地区一律用对应的国家名；中国的地区有细分的则一律用对应的省份名，无细分的则统一用“中国”；剩下的用“不详”。其中，area_list 和 area_map 是根据实际数据整理出来的，更详细代码见：DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph。

area_list = ['美国', '以色列', '澳大利亚', '英国', '加拿大', '文莱', '新加坡', '西班牙', '越南', '罗马尼亚', '马来西亚', '菲律宾', '新西兰', 
           '韩国', '日本', '北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '江苏', '浙江', '安徽', '福建', '江西', '山东', 
           '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '广西', '西藏', '宁夏', '新疆', 
           '香港', '澳门', '内蒙古', '黑龙江']

area_map = {'纽约': '美国', '美籍': '美国', '俄克拉荷马': '美国', '加州': '美国', '伦敦': '英国', 
          '东京': '日本', '京畿道高阳市': '韩国', '大邱广域市': '韩国', '台北':'台湾', '遵义': '贵州',
          '南京': '江苏', '青岛': '山东', '深圳': '广东', '杭州': '浙江', '成都': '四川', '衡水': '河北', 
          '大连': '山东', '齐齐哈尔': '黑龙江', '淮安': '江苏', '温州': '浙江', '唐山': '河北', '福州': '福建', 
          '营口': '辽东', '武汉': '湖北', '广州': '广东'}

def get_city(address):
    for area in area_list:
        if area in address:
            return area
    for area in area_map.keys():
        if area in address:
            return area_map[area]
    if '中国' in address: return '中国'
    else: return '不详'
ylq_star_infos['area'] = ylq_star_infos['address'].apply(get_city)
ylq_star_infos.head()

接下来是将爬取的 CSV 数据转换成 InteractiveGraph 所需的 JSON 数据，可以参考Github/InteractiveGraph项目里给出的红楼梦数据：dist/examples/honglou.json。古柳对该数据集曾简单介绍和分析过，可见：安利一个惊艳的红楼梦可视化作品和左手读红楼梦，右手写BUG，闲快活。详细代码一展开讲又会又臭又长，大家还是去 GitHub 看吧，有疑问可去“Python交友娱乐会所”（QQ群：613176398），最终 JSON 数据最终格式大致如下，InteractiveGraph 0.1.1 版本还需加一段 JavaScript 代码，InteractiveGraph 0.2.0 应该是不需要了，本次用了前者，后者还未尝试过，有机会再看：

{
  "categories": {
    "Star": "明星",
    "Area": "地区"
  },
  "data": {
    "nodes": [
      {
        "label": "中国",
        "value": 211,
        "id": 117971764772430883811744432104367026350,
        "categories": [
          "Area"
        ],
        "info": ""
      },
      ...
      {
        "label": "新垣结衣",
        "value": 1,
        "id": 71,
        "image": "static/images/star/新垣结衣.jpg",
        "categories": [
          "Star"
        ],
        "info": "日本 / 1988-06-11"
      },
      ...
    ],
    "edges": [
      {
        "id": 221862466013404320763033294366140362926,
        "label": "姐弟",
        "from": 801,
        "to": 1255
      },
      ...
      {
        "id": 300862216428897559752162867914678825134,
        "label": "出生于",
        "from": 1,
        "to": 117971766594678621641213275765944971438
       },
       ...
    ]
  }
}

处理完数据，回过头添加对应 yulequan-relations-graph.html 文件；在graph_view.py 里定义路由，渲染 html 文件，运行 app_run.py ，打开 http://127.0.0.1:5000/yulequan-relations-graph 就成功啦！欢迎大家在自己感兴趣的数据集上动手实现酷炫的关系图谱。

以上，完结撒花！