用D3.js画的人物关系demo
代码下载地址:https://github.com/zhangzn3/group-explorer
### Demo1功能
***
* 支持节点拖拽
* 支持节点拖拽并固定位置
* 支持鼠标浮到节点显示节点信息
* 支持鼠标浮到节点隐藏不相关的节点及线
* 支持画布整体缩放移动 ### Demo2功能
***
* 支持节点拖拽
* 支持节点拖拽并固定位置
* 支持鼠标浮到节点显示节点信息
* 支持双击节点隐藏不相关的节点及线 可以累加双击的节点
* 支持双击画布空白处还原显示所有节点信息
* 支持画布整体缩放移动
效果预览

用D3.js画的人物关系demo的更多相关文章
- java+数据库+D3.js 实时查询人物关系图
先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...
- 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛
前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...
- D3.js画思维导图(转)
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- d3.js画折线图
下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...
- d3.js ---画坐标轴
画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scal ...
- 基于cytoscape.js 、 d3.js实现的关系图谱初级版本
前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...
- SVG基础图形和D3.js
使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
随机推荐
- HDFS笔记(一)
1. HDFS 是什么? Hadoop分布式文件系统(Distributed File System)-HDFS(Hadoop Distributed File System) 2. HDFS 架构 ...
- Python 爬虫三 beautifulsoup模块
beautifulsoup模块 BeautifulSoup模块 BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,之后遍可以使用他提供的方法进行快速查 ...
- A - Brackets POJ - 2955 (区间DP模板题)
题目链接:https://cn.vjudge.net/contest/276243#problem/A 题目大意:给你一个字符串,让你求出字符串的最长匹配子串. 具体思路:三个for循环暴力,对于一个 ...
- Git命令执行漏洞
Git命令造成的反弹shell 漏洞描述: Git LFS可以.lfsconfig使用LFS由存储库中的文件配置(部分),并且可以将Git LFS指向ssh://. [lfs] url = ssh:/ ...
- android中常用的优秀功能 (AsyncTask)
1.用好 AsyncTask 一个优秀的android app,肯定少不了一个很好的用户体验,除了界面等外,流畅的交互,快速响应的速度都是至关重要,若 是加载一个数据,都得等上几秒钟,怕是app卸载率 ...
- Scala 入门介绍
1 基础 1.1 Scala 解释器 REPL - 交互式解释器环境 R(read).E(evaluate).P(print).L(loop) 输入值,交互式解释器会读取输入内容并对它求值,再返回结果 ...
- Shell-cat url-list.txt | xargs wget -c
假如你有一个文件包含了很多你希望下载的 URL,你能够使用 xargs下载所有链接: cat url-list.txt | xargs wget -c
- FAT32文件格式示例解析
1.前言 本文主要以一个示例来分析FAT32文件系统的格式,对FAT32文件系统的各个区域详细分析. 2.FAT32文件系统典型分区 3.FAT32文件系统示例 按如下步骤在ubuntu下创建FAT3 ...
- NandFlash和iNand【转】
转自:https://www.cnblogs.com/PengfeiSong/p/6380447.html nand 1.nand的单元组织:block与page(大页Nand与小页Nand)(1)N ...
- motor helper
# -*- coding: utf-8 -*- # @Time : 2019-02-13 10:44 # @Author : cxa # @File : mongohelper.py # @Softw ...