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;
        });

四、问题反馈

如有问题可反馈至留言，欢迎指正。