安利一個驚豔的紅樓夢可視化做品

更新：《左手讀紅樓夢，右手寫BUG，閒快活》一文對該數據集進行了分析挖掘，加了許多紅樓夢的內容，以及幾個書裏的黃段子，逃。代碼開源在：DesertsX/gulius-projects

直接上圖，安利下這個關於紅樓夢的可視化做品網址在此：InteractiveGraph/example1。要是有最近在讀《紅樓夢》的朋友，能夠對照着來看，想來是很棒的體驗。

在此關係圖譜中，粉紅色節點表明紅樓夢中出現的人物，主要角色用了1987版紅樓夢部分演員的劇照，點擊每一個節點能看到人物的介紹；黃色節點爲書中出現過的主要地點；藍色節點爲書中主要的情節、事件，一樣點擊後能看到情節概述，不過不是原文內容。古柳雖然好久沒看紅樓夢原書和87版電視劇了，但這些仍是門兒清的。

網頁右上角提供了一些可選的按鈕，其中第四個是展現節點間關係用的，對小說不了解、或初讀的讀者可能會有幫助，比咱們那年月本身看書或一些讀者搜網上單純的羅列人物圖譜要直觀的多。好比寶玉的母親、乾孃、妻子、同宗、哥哥、僕人等等，越看越以爲這背後的數據集真的是厲害…..

更多細節你們可自行探索，古柳當初看到時就以爲很驚豔，做爲一個「僞」紅迷，看到這麼棒的項目，幻想着要是能哪天本身復現出來，也是「死而無憾」了。幸運的是，這個項目全部代碼也開源在了GitHub - InteractiveGraph。

在README_CN.md文件裏介紹了具體實現細節，仍是很詳細的，哪怕裏面不少技術沒接觸過，也能有個方向。不過，技術有了，用到的數據格式又是怎麼樣的呢？假如想遷移到其餘小說、其餘文本內容上又該怎麼準備數據呢？

帶着這個疑惑找到了dist/examples/honglou.json文件，簡單的摘錄開頭部分數據。categories定義了上面關係圖譜裏節點類型；translator代碼跳過（==）；data 處開始到最後5000多行就是各種全部節點的數據了，顯示event事件的數據格式樣例。

{
  "categories": {
    "person": "人物",
    "event": "事件",
    "location": "地點"
  },
  "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;
      }
    },
  },
  "data": {
    "nodes": [{
        "label": "共讀西廂",
        "value": 2,
        "id": 3779,
        "categories": [
          "event"
        ],
        "info": "寶玉到沁芳橋邊桃花底下看《西廂記》，正準備將落花送進池中，黛玉說她早已準備了一個花冢，正來葬花。黛玉發現《西廂記》，寶玉借書中詞句，向黛玉表白。黛玉以爲冒犯了本身尊嚴，引發口角，寶玉賠禮討饒，黛玉也借《西廂記》詞句，嘲笑了寶玉。因而兩人收拾落花，葬到花冢裏去。"
      },
      {
        "label": "林如海捐館揚州城",
        "value": 4,
        "id": 3780,
        "categories": [
          "event"
        ],
        "info": "林如海考中探花後，遷爲蘭臺寺大夫，欽點爲揚州巡鹽御史。後身染重病於九月初三日巳時而亡。"
      },
複製代碼

《小戲骨紅樓夢》之寶黛共讀西廂：

地點節點數據樣式：

{
        "label": "瀟湘館",
        "value": 3,
        "id": 3838,
        "categories": [
          "location"
        ],
        "info": "黛玉的居所。黛玉做詩的筆名就瀟湘妃子，這是曹雪芹對黛玉這我的物的讚美。"
      },
複製代碼

《小戲骨紅樓夢》之寶釵

人物節點數據：

{
        "label": "王熙鳳",
        "value": 25,
        "image": "./images/photo/王熙鳳.jpg",
        "id": 4041,
        "categories": [
          "person"
        ],
        "info": "金陵十二釵之九，來自四你們族之王家，王夫人的內侄女，賈璉之妻。她精明強幹，深得賈母和王夫人的信任，成爲榮國府的管家奶奶，她爲人處事圓滑周到，圖財害命的事也幹過很多，在前80回裏她支持寶黛愛情。"
      },
複製代碼

《小戲骨紅樓夢》之寶黛美如畫：

最後是全部節點所表明的實體之間的關係：

{
        "id": 3324,
        "label": "僕人",
        "from": 3876,
        "to": 4103
      },
複製代碼

最近也接觸了些依存句法分析、信息提取等NLP的內容，但理論歸理論，真要用來提取小說裏進行命名實體識別、實體關係提取、事件抽取等等仍是差得遠，之後往後能復現這一項目。

最後再放張87版紅樓夢的劇照，雖然真的以爲對小戲骨的紅樓夢的喜愛要超過前者了。逃……

歡迎關注公衆號「牛衣古柳」（ID：Deserts-X）哈！