使用Echarts绘制力导向图

桃扇骨 2023-06-12 06:16 43阅读 0赞

文章目录

  • 使用Echarts绘制力导向图
    • 前言
    • 参考文档
    • 绘制力导向图
    • 准备图文件
    • 扩展阅读

使用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文件,例如:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <!-- https://echarts.baidu.com/dist/echarts.js -->
  7. <!-- https://echarts.baidu.com/dist/echarts.min.js -->
  8. <script src="./dist/echarts.min.js"></script>
  9. <!-- https://code.jquery.com/jquery-3.4.1.min.js -->
  10. <script src="./dist/jquery-3.4.1.min.js"></script>
  11. <!-- https://raw.githubusercontent.com/apache/incubator-echarts/master/dist/extension/dataTool.min.js -->
  12. <script src="./dist/dataTool.min.js"></script>
  13. </head>
  14. <body>
  15. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  16. <div id="main" style="width: 1200px;height:800px;"></div>
  17. <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, y node.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>
  18. </body>
  19. </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

发表评论

表情:
评论列表 (有 0 条评论,43人围观)

还没有评论,来说两句吧...

相关阅读