代码下载地址: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. Kafka如何保证消息不丢失不重复

    首先需要思考下边几个问题: 消息丢失是什么造成的,从生产端和消费端两个角度来考虑 消息重复是什么造成的,从生产端和消费端两个角度来考虑 如何保证消息有序 如果保证消息不重不漏,损失的是什么 大概总结下 ...

  2. js对象数组去重

    <script> var array = [{ greeting: "Hello", nickName: "Aziz" }, { greeting: ...

  3. 【译】第三篇 SQL Server安全主体和安全对象

    本篇文章是SQL Server安全系列的第三篇,详细内容请参考原文. 一般来说,你通过给主体分配对象的权限来实现SQL Server上的用户与对象的安全.在这一系列,你会学习在SQL Server实例 ...

  4. python 生成器的GeneratorExit异常

    转载自:https://blog.csdn.net/hedan2013/article/details/72810653 当一个生成器对象被销毁时,会抛出一个GeneratorExit异常.请看下面的 ...

  5. 异步Async

    1.c#异步介绍 异步必须基于委托,有委托才有异步 新建一个window Form程序MyAsync,添加一个按钮,(name)=btnAsync 后台代码如下: using System;using ...

  6. lcx工具使用

    0x01 为什么要作端口转发? 如果外网服务器,我们直接连接其端口就能进行访问,不需要进行端口转发.所以端口转发常用于穿透防火墙. 0x02 快速使用 前提:你的计算机处于公网,被控制的计算机能访问外 ...

  7. RPO攻击 & share your mind

    参考文章: https://xz.aliyun.com/t/2220 http://www.thespanner.co.uk/2014/03/21/rpo/ https://www.lorexxar. ...

  8. compileSdkVersion,minSdkVersion 和 targetSdkVersion

    compileSdkVersion(Eclipse中叫做build target) 1.在eclipse中位于项目根目录中的project.properties文件中 2.在studio中位于项目中的 ...

  9. IndexedDB API

    参考链接:https://wangdoc.com/javascript/bom/indexeddb.html

  10. Nginx系列2：用Nginx搭建一个可用的静态资源Web服务器

    上一节中编译好自己的nginx服务器后, 现在要对nginx.conf文件进行配置,搭建一个可用的静态资源Web服务器 1.放入可访问的html文件到nginx文件夹下,如图1所示: 这里我放入的是一 ...