Vue4 d3v5力导向图示例(封装组件)

vuecli4 d3v5 力导向图示例(封装组件)
项目简介
前段时间接到一个项目，参考这个网站https://www.ownthink.com/（思知），做一个类似功能的知识图谱功能的平台。需要使用D3V5开发，所以就做了这么一个demo程序。
使用d3v5开发的ForceDirected的vue组件，方便灵活使用。

本项目参考官方示例：https://gywgithub.github.io/vue-d3-examples/#/examples/forcedirected

如果觉得本项目能帮助到你，欢迎star支持，谢谢。

项目下载
gitee地址：https://gitee.com/e4glet/vue4_d3v5_forcedirected
github地址：https://github.com/e4glet/vue4_d3v5_forcedirected

项目效果

框架版本
nodejs v12.16.1
vue/cli 4.4.6
d3/5.16.0
框架结构
    src             --  资源目录
        axios       --  封装axios
        assets      --  静态资源文件
        components  --  组件
        router      --  路由，负责指定页面链接
        service     --  服务层，数据联调，引入请求
        store       --  Vuex
        views       --  视图页面
        main.js     --  入口文件
1
2
3
4
5
6
7
8
9
项目安装
npm install
1
Compiles and hot-reloads for development
npm run serve
1
Compiles and minifies for production
npm run build
1
项目访问入口
http://localhost:8080/

修改vue默认端口
在“nodemodules文件夹”→“@vue”→“@cli-service”→“lib”→“commands”→“serve.js”中，修改默认端口

const defaults = {
  host: '0.0.0.0',
  port: 8089,               -- 这里修改
  https: false
}
1
2
3
4
5
更新日志
2020年7月24日
上传demo示例
————————————————
版权声明：本文为CSDN博主「e4glet」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/eaglet8468/article/details/107552315