代码下载地址: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. 【Thymeleaf】浅谈Java模板引擎(带更新...)

    什么是模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 为什么要用模板 ...

  2. objectMapper、JsonNode、JsonObject常用方法

    一.objectMapper https://blog.csdn.net/han1196639488/article/details/79358743 二.JsonNode.JsonObject常用方 ...

  3. mysql 原理 ~ 线程与IO

    一 简介:今天来聊聊具体的线程和IO 二 具体线程与作用 1 master thread    mysql的主要工作触发线程 1 redo and binlog日志      2 合并插入缓冲.    ...

  4. Spark架构与作业执行流程简介

    https://www.cnblogs.com/shenh062326/p/3658543.html

  5. Javascript - ExtJs - ToolTip组件

    一个浮动的提示信息组件…… Ext,                               //可选 指定箭头的位置     anchor: 'buttom',                  ...

  6. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  7. IDEA在同一窗口导入多个项目

    在同一窗口打开多个项目 1. 当前窗口: 2. 3.  选择import module即可.然后一直点击next导入OK即可. 同一窗口目录下创建多个项目 1.File→New→Module 2.Ja ...

  8. 对象及变量的并发访问(同步方法、同步代码块、对class进行加锁、线程死锁)&内部类的基本用法

    主要学习多线程的并发访问,也就是使得线程安全. 同步的单词为synchronized,异步的单词为asynchronized 同步主要就是通过锁的方式实现,一种就是隐式锁,另一种是显示锁Lock,本节 ...

  9. HBSX2019 3月训练

    Day 1 3月有31天废话 今天先颓过了就只剩30天了 初步计划 每天一道字符串/数据结构题 图论学习 根据<若干图论模型探讨>(lyd)复习 二分图与网络流学习 <算法竞赛进阶指 ...

  10. Linux Shell脚本编程

    ⒈为什么要学习Shell编程 1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理 2)对于JavaEE和Python程序员来说,有些工作需要编写一些Shell脚本进 ...