Echats關係圖les-miserables的圖表詳細解析（和絃圖）

echats關係圖之les-miserables的圖表解析（和絃圖）

一、圖表展示分析

• 當前遇到的圖表爲關係圖官網連接les-miserables圖形編輯，它的數據結構連接爲：https://www.echartsjs.comdata/asset/data/les-miserables.gexf 在瀏覽器內打開後即可下載當前gexf文件。

二、字段含義解釋

1.JSON數據字段信息

• 圖表內是對gexf格式文件進行了解析。解析出的JSON格式如下（截取部分代碼），此處代碼命名爲graph：

var graph = {
	"nodes": [{
		"id": "0",
		"name": "Myriel",
		"itemStyle": {
			"normal": {
				"color": "rgb(235,81,72)"
			}
		},
		"symbolSize": 28.685715,
		"x": -266.82776,
		"y": 299.6904,
		"attributes": {
			"modularity_class": 0
		}
	}, {
		"id": "1",
		"name": "Napoleon",
		"itemStyle": {
			"normal": {
				"color": "rgb(236,81,72)"
			}
		},
		"symbolSize": 4,
		"x": -418.08344,
		"y": 446.8853,
		"attributes": {
			"modularity_class": 0
		}
	}, {
		"id": "2",
		"name": "MlleBaptistine",
		"itemStyle": {
			"normal": {
				"color": "rgb(236,81,72)"
			}
		},
		"symbolSize": 9.485714,
		"x": -212.76357,
		"y": 245.29176,
		"attributes": {
			"modularity_class": 1
		}
	}],
	"links": [{
		"id": "0",
		"name": null,
		"source": "1",
		"target": "0",
		"lineStyle": {
			"normal": {}
		}
	}, {
		"id": "1",
		"name": null,
		"source": "2",
		"target": "0",
		"lineStyle": {
			"normal": {}
		}
	}, {
		"id": "2",
		"name": null,
		"source": "3",
		"target": "0",
		"lineStyle": {
			"normal": {}
		}
	}]

2.字段解析

• 在JSON中信息可以看出來，nodes數組內所包含的爲各個點。
  而"attributes": { "modularity_class": 0 }中的modularity_class展示的是相同類別的點。
  
  從圖中以及官網提供代碼可以看出當前爲9種品類，分別用不同的顏色代表，即 “modularity_class” 的值爲 “0-8” 的整數範圍。symbolSize爲當前點的值數值大小。modularity_class 值相同的 nodes 點，即爲同一類別且同一顏色。每個nodes數組內的點，分別用id該字段作爲唯一標誌信息。

• links數組字段代表着連線，其中的"source": "3", "target": "0",代表含義爲：源id 點 （source）連線至目的id點（target），id點值即爲上面提到的nodes內的標誌信息。links內的每一個數據均代表一根連線。

• 我有嘗試用這個關係圖來作爲城軌交通內的列車運行OD圖，但最終失敗了。原因在於OD圖爲雙向OD，但該圖的雙向線會重疊，不太理想的效果。

三、代碼解析

官網提供的對於節點代碼解析如下：遍歷nodes點，根據節點數值symbolSize設置處理爲大於10後進行當前節點名稱顯示，重組node節點字段數據

      graph.nodes.forEach(function (node) {
            node.itemStyle = null;
            node.value = node.symbolSize;
            node.symbolSize /= 1.5;
            node.label = {
                normal: {
                    show: node.symbolSize > 10
                }
            };
            node.category = node.attributes.modularity_class;
        });

四、問題反饋

如有問題可反饋至留言，歡迎指正。