{"id":14959433,"url":"https://github.com/iaboaix/networkgraph","last_synced_at":"2025-09-08T12:32:07.214Z","repository":{"id":201353848,"uuid":"166654524","full_name":"iaboaix/NetworkGraph","owner":"iaboaix","description":"基于D3.js的Neo4j网络图可视化(Visualization of Neo4j Network Graph Based on D3.js","archived":false,"fork":false,"pushed_at":"2020-01-16T14:11:18.000Z","size":41287,"stargazers_count":203,"open_issues_count":5,"forks_count":68,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-27T02:10:16.580Z","etag":null,"topics":["d3","neo4j","network"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iaboaix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":"https://github.com/iaboaix/NetworkGraph#Sponsor-赞助"}},"created_at":"2019-01-20T11:41:36.000Z","updated_at":"2024-10-19T12:47:30.000Z","dependencies_parsed_at":"2024-04-07T17:45:14.250Z","dependency_job_id":null,"html_url":"https://github.com/iaboaix/NetworkGraph","commit_stats":null,"previous_names":["iaboaix/networkgraph"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaboaix%2FNetworkGraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaboaix%2FNetworkGraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaboaix%2FNetworkGraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iaboaix%2FNetworkGraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iaboaix","download_url":"https://codeload.github.com/iaboaix/NetworkGraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232308555,"owners_count":18503119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","neo4j","network"],"created_at":"2024-09-24T13:19:43.267Z","updated_at":"2025-01-03T08:11:22.810Z","avatar_url":"https://github.com/iaboaix.png","language":"CSS","funding_links":["https://github.com/iaboaix/NetworkGraph#Sponsor-赞助"],"categories":[],"sub_categories":[],"readme":"# NetworkGraph\r\n\r\n![](https://img.shields.io/badge/build-passing-brightgreen.svg)\r\n![](https://img.shields.io/badge/name-NetworkGraph-red.svg)  \r\n![](https://img.shields.io/badge/qq%E7%BE%A4-144973444-green.svg)\r\n![](https://img.shields.io/badge/author-iaboaix-blue.svg)\r\n![](https://img.shields.io/badge/license-MIT-lightgrey.svg)  \r\n![](https://img.shields.io/badge/D3-v5.7.0-yellow.svg)\r\n![](https://img.shields.io/badge/neo4j-v3.4.9-orange.svg)\r\n![](https://img.shields.io/badge/python-v3.7.1-red.svg)\r\n![](https://img.shields.io/badge/django-v2.7.1-blueviolet.svg)\r\n![](https://img.shields.io/badge/py2neo-v4.2.0-ff69b4.svg)  \r\n\r\n如果对您有帮助，请点击 \u003cb\u003eStar\u003c/b\u003e 支持开发者\r\n\r\n## 一、项目预览\r\n[![Image text](others/preview.jpg)](http://148.70.238.152/)  \r\n\r\n## 二、功能简介\r\n- ### 快捷菜单栏(上)\r\n  下载示例数据、上传数据进行分析、导出编辑后的数据、导出图片、布局计算 开始/结束 控制、查找节点、全屏切换、以及留言、公共数据集、路径分析、图参数调节面板的显隐控制\r\n- ### 快捷工具栏(左上)\r\n  网络图缩放、旋转\r\n- ### 可视控制区(左下)\r\n  对网络图提示框、分类统计图、节点内文字、关系文字、关系箭头、贴心小提示进行显隐控制\r\n- ### 调色区(下)\r\n  对节点颜色进行更改  \r\n  注：先选中后才能更改\r\n- ### 留言面板(右)\r\n  对项目留言\r\n- ### 公共数据集选择面板(右)\r\n  选择公共数据集进行可视化分析\r\n- ### 路径分析面板(右)\r\n  输入两个节点的 index 进行路径分析\r\n- ### 图参数调节面板(右)\r\n  对网络图的节点间斥力、连接强度、节点和边的缩放比例、边的类型、网络图布局方式、分析模式以及对背景颜色或图片进行调整，也可对批量节点的大小、透明度、边的宽度进行调节  \r\n  注：需先进行节点和边的选中，方可调节\r\n- ### 右键菜单\r\n  - 右键点击空白区域，可进行节点创建\r\n  - 右键点击关系，可进行关系打破\r\n  - 右键点击节点，可进行节点扩展、节点删除、构建关系以及按条件选取\r\n## 三、项目部署\r\n- ### linux\r\n  #### 安装 python3 运行环境\r\n  1、yum install python36...  \r\n  2、yum install pip36...  \r\n  3、pip install django  \r\n  4、pip install py2neo\r\n  #### 安装java jdk\r\n  5、yum install java-1.8.0-openjdk\r\n  #### 安装neo4j\r\n  6、wget https://neo4j.com/artifact.php?name=neo4j-community-3.4.12-unix.tar.gz  \r\n  7、tar -xzvf neo4j-community-3.4.12-unix.tar.gz\r\n  #### 导入数据\r\n  8、neo4j-admin import --nodes nodes.csv --relationships links.csv\r\n  #### 修改neo4j配置 远程访问并修改密码\r\n  9、vim neo4j.conf  \r\n  10、把54行dbms.connectors.default_listen_address=0.0.0.0注释去掉  \r\n  11、远程访问neo4j数据库 http://IP:7474/ 修改初始密码\r\n  #### 拉取代码\r\n  12、git clone https://github.com/iaboaix/NetworkGraph.git\r\n  #### 启动 neo4j 和 django\r\n  13、neo4j start  \r\n  14、nohup python3 manage.py runserver --insecure 0.0.0.0:80 \u0026  \r\n  15、访问 http://127.0.0.1/\r\n- ### windows\r\n  #### 安装 python3 运行环境\r\n  1、安装python3.x  \r\n  2、安装python包  \r\n  3、pip install django  \r\n  4、pip install py2neo\r\n  #### 安装java jdk\r\n  5、下载地址  \r\n  https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html\r\n  #### 安装neo4j\r\n  6、下载地址  \r\n  https://neo4j.com/download/  \r\n  7、导入数据  \r\n  neo4j-admin import --nodes nodes.csv --relationships links.csv  \r\n  8、访问neo4j数据库并修改初始密码  \r\n  http://127.0.0.1:7474/  \r\n  修改初始密码为xxxxxx\r\n  #### 拉取代码\r\n  9、git clone https://github.com/iaboaix/NetworkGraph.git\r\n  #### 启动neo4j django\r\n  10、neo4j start  \r\n  11、python3 manage.py runserver --insecure 0.0.0.0:80  \r\n  12、访问 http://127.0.0.1/\r\n- ### tips:\r\n  1、启动之前，将服务器外网IP地址加入 django settings.py 的 ALLOWED_HOSTS  \r\n  2、若 django sqlite 报错  \r\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;vim /usr/local/lib64/python3.6/site-packages/django/db/models/base.py  \r\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;将版本检测代码段注释掉  \r\n  3、若 django debug = false 之后 静态文件找不到 启动时添加 --insecure  \r\n\r\n## 四、NetworkGraph.min.js模块使用方法\r\n\r\n### 下载最新模块\r\n[NetworkGraph.min.js](others/NetworkGraph/NetworkGraph.min.js)\r\n\r\n### 示例代码\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en\"\u003e\r\n\u003chead\u003e\r\n    \u003cmeta charset=\"UTF-8\"\u003e\r\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"d3.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"text/javascript\" src=\"NetworkGraph.min.js\"\u003e\u003c/script\u003e\r\n    \u003cstyle\u003e\r\n        html {\r\n            height: 100%;\r\n        }\r\n        body {\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n        #vis {\r\n            width: 100%;\r\n            height: 100%;\r\n            margin: 0 auto;\r\n        }\r\n    \u003c/style\u003e\r\n    \u003ctitle\u003eNetworkGraph\u003c/title\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n    \u003csvg id=\"vis\"\u003e\u003c/svg\u003e\r\n    \u003cscript\u003e\r\n        var data0 = {\r\n            \"nodes\": [\r\n                { \"id\": 0, \"label\": \"Person\",  \"size\": 30 },\r\n                { \"id\": 1, \"label\": \"Company\", \"size\": 10 },\r\n                { \"id\": 2, \"label\": \"Company\", \"size\": 15 },\r\n                { \"id\": 3, \"label\": \"Company\" },\r\n                { \"id\": 4, \"label\": \"Company\", \"size\": 17 },\r\n                { \"id\": 5, \"label\": \"Company\", \"size\": 40 },\r\n                { \"id\": 6, \"label\": \"Company\", \"size\": 35 }\r\n            ],\r\n            \"links\": [\r\n                { \"type\": \"EMPLOY\", \"source\": 0, \"target\": 1 },\r\n                { \"type\": \"EMPLOY\", \"source\": 0, \"target\": 1 },\r\n                { \"type\": \"EMPLOY\", \"source\": 1, \"target\": 0 },\r\n                { \"type\": \"EMPLOY\", \"source\": 1, \"target\": 2 },\r\n                { \"type\": \"EMPLOY\", \"source\": 2, \"target\": 3 },\r\n                { \"type\": \"EMPLOY\", \"source\": 0, \"target\": 2 },\r\n                { \"type\": \"EMPLOY\", \"source\": 3, \"target\": 4 },\r\n                { \"type\": \"EMPLOY\", \"source\": 3, \"target\": 4 },\r\n                { \"type\": \"EMPLOY\", \"source\": 3, \"target\": 6 },\r\n                { \"type\": \"EMPLOY\", \"source\": 5, \"target\": 0 },\r\n                { \"type\": \"EMPLOY\", \"source\": 3, \"target\": 0 },\r\n            ]\r\n        };\r\n        var data1 = {\r\n            \"nodes\": [\r\n                { \"id\": 10, \"label\": \"Person\"  },\r\n                { \"id\": 11, \"label\": \"Company\" },\r\n                { \"id\": 12, \"label\": \"Company\" },\r\n                { \"id\": 13, \"label\": \"Company\" },\r\n                { \"id\": 14, \"label\": \"Person\"  },\r\n                { \"id\": 15, \"label\": \"Company\" },\r\n                { \"id\": 16, \"label\": \"Company\" },\r\n                { \"id\": 17, \"label\": \"Company\" }\r\n            ],\r\n            \"links\": [\r\n                { \"type\": \"EMPLOY\", \"source\": 10, \"target\": 11 },\r\n                { \"type\": \"EMPLOY\", \"source\": 11, \"target\": 12 },\r\n                { \"type\": \"EMPLOY\", \"source\": 12, \"target\": 13 },\r\n                { \"type\": \"EMPLOY\", \"source\": 12, \"target\": 14 },\r\n                { \"type\": \"EMPLOY\", \"source\": 15, \"target\": 16 },\r\n                { \"type\": \"EMPLOY\", \"source\": 17, \"target\": 15 },\r\n                { \"type\": \"EMPLOY\", \"source\": 11, \"target\": 15 },\r\n                { \"type\": \"EMPLOY\", \"source\": 12, \"target\": 16 }\r\n            ]\r\n        };\r\n        var links = [\r\n            { \"source\": 0 , \"target\": 10, \"type\": \"\" },\r\n            { \"source\": 1 , \"target\": 11, \"type\": \"\" },\r\n            { \"source\": 11, \"target\": 1 , \"type\": \"\" }\r\n        ];\r\n        var network_graph = new NetworkGraph(\"vis\");\r\n        var graph0 = network_graph.drawNetworkGraph(data0, \"force\", 300, 400);\r\n        var graph1 = network_graph.drawNetworkGraph(data1, \"radius\", 900, 400);\r\n        graph1.connectGraph(graph0, links);\r\n        var node0 = {\r\n            \"id\": 100,\r\n            \"label\": \"Company\",\r\n            \"size\": 50,\r\n        };\r\n        var node1 = {\r\n            \"id\": 101,\r\n            \"label\": \"Company\",\r\n            \"size\": 30,\r\n        };\r\n        setTimeout(() =\u003e {\r\n            // network.addNode(node);\r\n            // network.addNode(node, x, y);\r\n            graph0.addNode(node0, 100, 200);\r\n            graph1.addNode(node1, 100, 200);\r\n        }, 1000);\r\n        setTimeout(() =\u003e {\r\n            // network.addLink(node,    node,    node_type);\r\n            // network.addLink(node_id, node_id, node_type);\r\n            // network.addLink(node,    node_id, node_type);\r\n            // network.addLink(node_id, node,    node_type);\r\n            graph0.addLink(node0, 3, \"TEST\");\r\n            graph1.addLink(node1, 16, \"TEST\");\r\n        }, 2000);\r\n        setTimeout(() =\u003e {\r\n            // network.removeLink(link);\r\n            graph0.removeLink(data0.links[0]);\r\n            graph0.removeNode(5);\r\n            graph1.removeLink(data1.links[2]);\r\n            graph1.removeNode(15);\r\n        }, 3000);\r\n    \u003c/script\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n### 使用效果\r\n\u003cimg src=\"others/NetworkGraph.png\" height=\"auto\" width=\"auto\"\u003e\r\n\r\n## 五、点击加入QQ群: [D3网络图可视化](https://jq.qq.com/?_wv=1027\u0026k=5oRv4zr)  \r\n\r\n## 六、[Sponsor-赞助](Sponsor)\r\n\u003cimg src=\"others/wechat.jpg\" height=\"300\" width=\"300\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"others/alipay.jpg\" height=\"300\" width=\"300\"\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiaboaix%2Fnetworkgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiaboaix%2Fnetworkgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiaboaix%2Fnetworkgraph/lists"}