代码下载地址:https://github.com/zhangzn3/group-explorer

### Demo1功能

***

  * 支持节点拖拽

  * 支持节点拖拽并固定位置

  * 支持鼠标浮到节点显示节点信息

  * 支持鼠标浮到节点隐藏不相关的节点及线

  * 支持画布整体缩放移动

### Demo2功能

***

  * 支持节点拖拽

  * 支持节点拖拽并固定位置

  * 支持鼠标浮到节点显示节点信息

  * 支持双击节点隐藏不相关的节点及线 可以累加双击的节点

  * 支持双击画布空白处还原显示所有节点信息

  * 支持画布整体缩放移动

效果预览　

用D3.js画的人物关系demo的更多相关文章

  1. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  2. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  3. D3.js画思维导图（转）

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  4. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  5. d3.js画折线图

    下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...

  6. d3.js ---画坐标轴

    画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scal ...

  7. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

  8. SVG基础图形和D3.js

    使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...

  9. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

随机推荐

  1. CF920E Connected Components?

    CF luogu 先讲两个靠谱的做法 1.首先因为有n个点,m条不存在的边,所以至少存在一个点,和m/n个点之间没边,所以把这个点找出来,连一下其他相连的点,这样还剩m/n个点没确定在哪个联通块,而这 ...

  2. python之实现循环查看指定路径下的所有文件---os.walk

    循环查看指定路径下的所有文件.文件夹,包含隐藏文件注:“.filename” 以点开头的是隐藏文件 import os for cur_path,cur_dirs,cur_files in os.wa ...

  3. Java中常见的锁分类以及对应特点

    对于 Java 锁的分类没有严格意义的规则,我们常说的分类一般都是依据锁的特性.锁的设计.锁的状态等进行归纳整理的,所以常见的分类如下: 公平锁和非公平锁:公平锁是多线程按照锁申请的顺序获取锁,非公平 ...

  4. 【blog】SpringBoot如何搭建聚合项目

    以我的博客为例 blog --blog-common --blog-entity --blog-repo --blog-service --blog-web SpringBoot聚合项目推荐 http ...

  5. C#后台进行Http请求

    1.Get请求 新建一个webform项目,添加一个按钮,定义click事件 protected void Button1_Click(object sender, EventArgs e) { st ...

  6. 编写blog第一天

    今天玩的比较嗨,离开学还剩半个月了,之前在网上搜集了一些blog制作方面的资料,并且在博客园注册了一个账号,今天才打开了申请已久的blog,现在已经对blog具有的基本功能和界面布局有了比较全面的掌握 ...

  7. Java开发环境配置(5)--Web 服务器--Tomcat--安装过程遇到的问题

    1.参考例子:--- 怎样安装配置tomcat 8_百度经验https://jingyan.baidu.com/article/ff42efa91132a0c19e220208.html 安装与配置T ...

  8. python - psutil 系统信息模块

    # .psutil是一个跨平台库能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. # 它主要用来做系统监控,性能分析,进程管理. # 它实现了同等命令行工具提供的功能 ...

  9. 小玩意--自定义log记录

    之前在帮TCL运维项目时,因某些原因,决定单就经销商相关业务中摒弃经典的log4j日志,改为每日自定义生成并写入相关日志,我遂写了一个util,代码如下:p.s.实现的思路很简单,仅为每次需要记录时, ...

  10. jQuery $.ajax传递数组的traditional参数传递必须true

    起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当 ...