使用Echarts绘制力导向图

前言

本文介绍了在VS Code中使用百度Echarts来绘制力导向图（Force-directred graph）。

参考文档

https://www.echartsjs.com/zh/tutorial.html
https://www.echartsjs.com/examples/zh/editor.html?c=graph-force

绘制力导向图

在VS Code中安装Live Server插件，用来做本地开发服务器，以解决异步加载图文件（.gexf）时的跨域问题。

准备需要用到的JavaScript文件放入./dist/目录下，包括Echarts, JQuery和dataTool：

https://echarts.baidu.com/dist/echarts.min.js
https://code.jquery.com/jquery-3.4.1.min.js
https://raw.githubusercontent.com/apache/incubator-echarts/master/dist/extension/dataTool.min.js

下载图文件（.gexf）样例放入./data/目录下：

http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf

在项目根目录下创建graph-force.html文件，例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts</title><!-- https://echarts.baidu.com/dist/echarts.js --><!-- https://echarts.baidu.com/dist/echarts.min.js --><script src="./dist/echarts.min.js"></script><!-- https://code.jquery.com/jquery-3.4.1.min.js --><script src="./dist/jquery-3.4.1.min.js"></script><!-- https://raw.githubusercontent.com/apache/incubator-echarts/master/dist/extension/dataTool.min.js --><script src="./dist/dataTool.min.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 1200px;height:800px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//app.title = '力引导布局';myChart.showLoading();// http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf// https://gephi.org/gexf/format/primer.html$.get('./data/les-miserables.gexf', function (xml) {myChart.hideLoading();var graph = echarts.dataTool.gexf.parse(xml);var categories = [];for (var i = 0; i < 9; i++) {categories[i] = {name: '类目' + i};}graph.nodes.forEach(function (node) {node.itemStyle = null;node.symbolSize = 10;node.value = node.symbolSize;node.category = node.attributes.modularity_class;// Use random x, ynode.x = node.y = null;node.draggable = true;});option = {title: {text: 'Les Miserables',subtext: 'Default layout',top: 'bottom',left: 'right'},tooltip: {},legend: [{// selectedMode: 'single',data: categories.map(function (a) {return a.name;})}],animation: false,series: [{name: 'Les Miserables',type: 'graph',layout: 'force',data: graph.nodes,links: graph.links,categories: categories,roam: true,label: {normal: {position: 'right'}},force: {repulsion: 100}}]};myChart.setOption(option);}, 'xml');</script>
</body></html>

在VS Code中，右键选择grah-force.html，选择Open with Live Server，将graph-force.html部署到Live Server开发服务器上，并在默认浏览器中打开。

如果页面加载有问题，按下Ctrl + Shift + I 来查看错误信息。

在VS Code中设置自动保存，在修改grap-force.html后，Live Server可以自动刷新页面。

准备图文件

除了使用上面的示例图文件（.gexf）外，还可以自己生成图文件，然后通过Echarts进行可视化展示。

方法一：通过Gephi生成图文件
准备好点数据和边数据的CSV文件，输入到Gephi中，再输出为图文件（.gexf）。Gephi也可以作图的可视化展示。

方法二：通过networkx生成图文件
通过networkx读取点数据和边数据，再生成图文件（.gexf）。networkx也可以作图的可视化展示。

扩展阅读

https://gephi.org/gexf/format/primer.html