代码下载地址: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. 网易云课堂《JS原创视频教程-知识点类》

    http://caniuse.com/#index     //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...

  2. Javascript - Jquery - 其它

    Ajax函数 $.ajax(url, type, success, error)//url:请求的页面路径//type:请求方式//success:请求成功的回调,该函数有两个参数:服务器返回数据(d ...

  3. 微信小程序滚动Tab选项卡：左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  4. 20165234 预备作业2 学习基础和C语言基础调查

    学习基础和C语言基础调查 一.技能学习经验及体会 你有什么技能比大多人(超过90%以上)更好? 看到这个问题,我仔细想了想,好像的确没有什么特别出众的技能,但是我想到了许多我个人的爱好. 我从小喜欢五 ...

  5. 经典视觉SLAM框架

    经典视觉SLAM框架 整个视觉SLAM流程包括以下步骤: 1. 传感器信息读取.在视觉SLAM中主要为相机图像信息的读取和预处理. 2. 视觉里程计(Visual Odometry,VO).视觉里程计 ...

  6. ROS tf 两个常用的函数

    /** \brief Get the transform between two frames by frame ID.   * \param target_frame The frame to wh ...

  7. 【转】Python模块学习 - fnmatch & glob

    [转]Python模块学习 - fnmatch & glob 介绍 fnmatch 和 glob 模块都是用来做字符串匹配文件名的标准库. fnmatch模块 大部分情况下使用字符串匹配查找特 ...

  8. eMMC基础技术5：emmc response

    1.前言 response是由device发给host,作为对先前发送的command的回应.response通过cmd信号线传输.本文将详细介绍response相关 2.response的类型 re ...

  9. MySQL伪master+Binlog+同步【转】

    MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步 :伪master+Binlog+同步(本文 ...

  10. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...