这是一种用于描述节点之间联系的图表。

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 弦图的制作的更多相关文章

  1. D3.js 弦生成器(V3版本)

    弦生成器(Chord Generator)   弦生成器(Chord Generator)根据两段弧来绘制弦,共有五个访问器,分别为source().target().radius().startAn ...

  2. 深入解析d3弦图

    记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继 ...

  3. 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  4. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  5. D3.js系列——布局:弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  6. d3.js制作连线动画图和编辑器

    此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...

  7. 【 D3.js 入门系列 --- 9.3 】 弦图生产

    我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: ...

  8. d3.js制作蜂巢图表带动画效果

    以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六 ...

  9. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

随机推荐

  1. javaScript去除空格或换行

    js 去掉空格.回车.换行 1 releaseDesc = releaseDesc.replace(/\ +/g,"").replace(/[\r\n]/g,"" ...

  2. hdu5681 zxa and wifi

    这道题目是不太好想的,尽管很容易看出来应该是dp,但是状态转移总觉得无从下手. 其实我们可以将状态分层,比如设$dp(i, j)$为用$i$个路由器覆盖前$j$个点所需的最小代价 我们先不考虑状态,而 ...

  3. hdu5514Frogs(2015ACM-ICPC沈阳赛区F题)

    这题很容易转化到一个容斥计数问题.而用指数复杂度的枚举计数法显然会挂,只能考虑别的方法. 首先将a[i]用gcd(a[i], m)替换,排序去重后得到一组m的约数,而m不超过1e9,因此m的所有约数最 ...

  4. C#递归1~100的累加

    public static int Accum(int m, int n) { //对于接受的参数,要考虑m >n,m=n,m<n三种情况. if (m < n) { return ...

  5. 自用java字符串工具类

    不断封装一些常用的字符串操作加到这个工具类里,不断积累: package com.netease.lede.qa.util; import java.text.ParseException; impo ...

  6. 列出本机JCE提供者,支持消息摘要算法,支持公钥私钥算法

    import java.security.Provider; import java.security.Security; public class TestBouncyCastle { public ...

  7. python学习笔记五 模块上(基础篇)

    模块学习 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要 ...

  8. 某代理网站免费IP地址抓取测试

    源代码在测试中... http://www.AAA.com/nn/|    122.6.107.107|    8888|    山东日照|    高匿|    HTTP|    |    |     ...

  9. 用InstallShield 打包工具 打 Win32 程序 (depends.exe 用看程序都依赖了哪些dll)

    InstallShield 打包工具 1. 转载:http://blog.csdn.net/zhang_xinxiu/article/details/9099757 2. 转载:http://www. ...

  10. DataList数据的绑定

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...