Detailed analysis of graphs of echats diagram les miserables (chord diagram)

echats Diagram of les-miserables Chart analysis of （ Chords ）

One 、 The chart shows the analysis

• Currently, the diagram encountered is a diagram Official website connection les-miserables Graphic editing , Its data structure is connected as ：https://www.echartsjs.comdata/asset/data/les-miserables.gexf After opening in the browser, you can download the current gexf file .

Two 、 Field meaning explanation

1.JSON Data field information

• The chart is right gexf Format file is parsed . It was resolved that JSON The format is as follows （ Intercept part of the code ）, The code here is named 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. Field analytical

• stay JSON You can see the information in ,nodes The array contains points .
  and "attributes": { "modularity_class": 0 } Medium modularity_class Show points of the same category .
  
  From the figure and the code provided on the official website, we can see that the current code is 9 Species , Use different colors to represent , namely “modularity_class” The value of is “0-8” The integer range of .symbolSize Is the value size of the current point .modularity_class Same value nodes spot , It is the same category and the same color . Every nodes Points in the array , Use them separately id This field is used as the unique flag information .

• links Array fields represent lines , Among them "source": "3", "target": "0", Representative means ： Source id spot （source） Connect to the destination id spot （target）,id The point value is the above mentioned nodes Logo information in .links Each data in represents a connection .

• I have tried to use this diagram as a train operation in urban rail transit OD chart , But it failed in the end . The reason lies in OD The picture shows two-way OD, But the two-way lines of the figure will overlap , Less ideal effect .

3、 ... and 、 Code parsing

The code analysis of nodes provided by the official website is as follows ： Traverse nodes spot , According to the node value symbolSize Set the processing to be greater than 10 Then display the current node name , restructuring node Node field data

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

Four 、 Problem feedback

If you have any questions, please feedback to the message , Welcome to correct .