D3.js 弦图的制作
这是一种用于描述节点之间联系的图表。
1. 弦图是什么
弦图(Chord),主要用于表示两个节点之间的联系。
两点之间的连线,表示谁和谁具有联系:
线的粗细表示权重:
2. 数据
初始数据为:
var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [
[ 1000, 3045 , 4567 , 1234 , 3714 ],
[ 3214, 2000 , 2060 , 124 , 3234 ],
[ 8761, 6545 , 3000 , 8045 , 647 ],
[ 3211, 1067 , 3214 , 4000 , 1006 ],
[ 2146, 1034 , 6745 , 4764 , 5000 ]
];
D3.js 弦图的制作的更多相关文章
- D3.js 弦生成器(V3版本)
弦生成器(Chord Generator) 弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAn ...
- 深入解析d3弦图
记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继 ...
- 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- d3.js制作连线动画图和编辑器
此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...
- 【 D3.js 入门系列 --- 9.3 】 弦图生产
我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: ...
- d3.js制作蜂巢图表带动画效果
以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六 ...
- 【 D3.js 高级系列 — 10.0 】 思维导图
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
随机推荐
- htmlnav
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- poj1988 Cube Stacking
并查集的高效之处在于路径压缩和延迟更新. 在本题中需要额外维护子树的规模以及当前子树节点到跟的距离两个数组. 由于一个新的数必然是两棵树拼接而成,对于子树规模的更新直接相加即可, 对于节点到跟的距离: ...
- LoadRunner使用之变量关联
性能测试LR小结之参数关联(LoadRunner11.0) 关联对于LR是经常需要用到的,本章使用简单登录来介绍关联功能. 1. Q:何为关联? 所谓的关联就是把脚本中某些写死的代码(ha ...
- eclipse alt+/ 无效时,如何设置 《转》
一般情况下alt+/有代码提示作用,还有代码提示的快捷代码也不是alt+/,因此要恢复代码提示用alt+/.需要做两件事. 在 Window - Preferences - General - Key ...
- [kipmi0]进程导致系统负载高
最近一个用户这边服务器运行四五天就会出现服务器负载很高的情况,原本正常是0.3~0.5左右 不正常的时候会达到3,重启机器就正常,开始以为是程序问题,后来在观察的时候把程序给杀掉了 然后重启,结果负 ...
- NTT
1 问题描述FFT问题解决的是复数域上的卷积.如果现在的问题是这样:给出两个整数数列$Ai,Bj,0\leq i\leq n-1,0\leq j\leq m-1$,以及素数$P$,计算新数列$Ci=( ...
- 【Unity3D游戏开发】性能优化之spine提高80~90%的效率 (三一)
Spine效率低 Unity项目加载spine动画,经常会出现卡顿的情况,如游戏中瞬间播放一个动画,打开一个带spine动画的界面.尤其是SkeletonRenderer.Awake时,会瞬间出现大量 ...
- 【Unity3D游戏开发】Application.systemLanguage无法区分简体中文和繁体中文 (二六)
游戏发布,语言本地化需要繁体中文和简体中文 iOS8版本之前没问题,iOS9上无法正常识别这两种语言 原因是在iOS9上,Unity通过Application.systemLanguage返回的简体中 ...
- eclipse选中变量,相同变量高亮。
选择Windows->Preferences->Java->Editor->Mark Occurrences,全部选择并保存. 如下图:
- WebRTC的学习(一)
这篇文章是我翻译mozilla上的英文资料. 英文原文的链接地址为https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Protoco ...