一、图表交互操作

  与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应。

  交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应。对可视化图表来说,交互能使图表更加生动,能表现更多内容。例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。

  用户用于交互的工具一般有三种:鼠标、键盘、触屏。

  添加交互:对某一元素添加交互操作十分简单,代码如下:

var circle = svg.append("circle");

circle.on("click", function(){
//在这里添加交互内容
});

  这段代码在 SVG 中添加了一个圆,然后添加了一个监听器,是通过 on() 添加的。在 D3 中,每一个选择集都有 on() 函数,用于添加事件监听器。

  on() 的第一个参数是监听的事件,第二个参数是监听到事件后响应的内容,第二个参数是一个函数

  鼠标常用的事件有:

  • click:鼠标单击某元素时,相当于 mousedown 和 mouseup 组合在一起。
  • mouseover:光标放在某元素上。
  • mouseout:光标从某元素上移出来时。
  • mousemove:鼠标被移动的时候。
  • mousedown:鼠标按钮被按下。
  • mouseup:鼠标按钮被松开。
  • dblclick:鼠标双击。

  键盘常用的事件有三个:

  • keydown:当用户按下任意键时触发,按住不放会重复触发此事件。该事件不会区分字母的大小写,例如“A”和“a”被视为一致。
  • keypress:当用户按下字符键(大小写字母、数字、加号、等号、回车等)时触发,按住不放会重复触发此事件。该事件区分字母的大小写。
  • keyup:当用户释放键时触发,不区分字母的大小写。

  触屏常用的事件有三个:

  • touchstart:当触摸点被放在触摸屏上时。
  • touchmove:当触摸点在触摸屏上移动时。
  • touchend:当触摸点从触摸屏上拿开时。

  当某个事件被监听到时,D3 会把当前的事件存到 d3.event 对象,里面保存了当前事件的各种参数,请大家好好参详。如果需要监听到事件后立刻输出该事件,可以添加一行代码:

circle.on("click", function(){
console.log(d3.event);
});

  实例:添加鼠标移入(mouseover),鼠标移出(mouseout)两个事件的监听器。监听器函数中都使用了 d3.select(this),表示选择当前的元素,this 是当前的元素,要改变响应事件的元素时这么写就好。

.attr("fill","steelblue")
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration()
.attr("fill","steelblue");
});

二、布局

  布局,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了。

1、布局是什么

  布局,英文是 Layout。从字面看,可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。下图展示了 D3 与其它可视化工具的区别:

  可以看到,D3 的步骤相对来说较多。坏处是对初学者不方便、也不好理解。好处是能够制作出更加精密的图形。因此,我们可以据此定义什么时候选择 D3 比较好:

  • 选择 D3:如果希望开发脑海中任意想象到的图表。
  • 选择 Highcharts、Echarts 等:如果希望开发几种固定种类的、十分大众化的图表。

2、如何理解布局

  从上面的图可以看到,布局的作用是:将不适合用于绘图的数据转换成了适合用于绘图的数据。为了便于初学者理解,可以将布局的作用理解成:数据转换

3、布局有哪些

  D3 总共提供了 12 个布局:

  饼状图(Pie)、力导向图(Force)、弦图(Chord)、树状图(Tree)、集群图(Cluster)、捆图(Bundle)、打包图(Pack)、直方图(Histogram)、分区图(Partition)、堆栈图(Stack)、矩阵树图(Treemap)、层级图(Hierarchy)。

  12 个布局中,层级图(Hierarchy)不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来,能够使用的布局是 11 个(有 5 个是由层级图扩展而来)。这些布局的作用都是将某种数据转换成另一种数据,而转换后的数据是利于可视化的。

D3.js系列——交互式操作和布局的更多相关文章

  1. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  2. D3.js:交互式操作

    用户用于交互的工具一般有三种:鼠标.键盘.触屏. 1. 添加交互 对某一元素添加交互操作十分简单,代码如下: //画布大小 var width = 500, height = 500; // 在bod ...

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

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

  4. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  5. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  6. 文章预告的自我挖坑系列——D3.js 系列之星光闪烁

    D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691      星空 二维(一)h ...

  7. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  8. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  9. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

随机推荐

  1. bzoj 4569 [Scoi2016]萌萌哒 并查集 + ST表

    题目链接 Description 一个长度为\(n\)的大数,用\(S_1S_2S_3...S_n\)表示,其中\(S_i\)表示数的第\(i\)位,\(S_1\)是数的最高位,告诉你一些限制条件,每 ...

  2. efi转bios详细说明

    前言 制作好的efi格式的ubuntu15.10系统放到服务器主板上启动不了,于是将其改为bios格式,发现问题解决了,成功登入系统.下面是操作过程的一个记录. 测试环境 目标环境 系统: Ubunt ...

  3. Tarjan 联通图 Kuangbin 带你飞 联通图题目及部分联通图题目

    Tarjan算法就不说了 想学看这 https://www.byvoid.com/blog/scc-tarjan/ https://www.byvoid.com/blog/biconnect/ 下面是 ...

  4. canvas的基础使用。

    目录: 创建canvas. 绘制直线.多边形和七巧板. 绘制弧和圆. (有些图过于宽,被挤压了.可以去相册[canvas用到的图.]看原图.) 创建canvas. HTML5的新标签<canva ...

  5. 前段基础JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  6. hdu5514

    hdu5514 题意 \(m\) 个石子绕成一圈,编号\([0, m - 1]\).有 \(n\) 个青蛙从 \(0\) 号石子出发,给出每个青蛙的步长,青蛙无限跑圈.问哪些石子至少被一个青蛙经过,求 ...

  7. Scrum实施调查案例

    什么是敏捷开发方法?什么是SCRUM? 有人在这个字面上下功夫,说敏捷就是反应要灵敏,动作要快捷:有人还在字面上进行延伸,说敏捷就是又好又快,或者就是多快好省:有人说敏捷就是光写代码不写文档:有人觉得 ...

  8. HDU 1166 敌兵布阵 <线段树 单点修改 区间查询>

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. [CF414E]Mashmokh's Designed Problem

    题意:给一棵树,有三个操作:①询问两点$(x,y)$之间的距离②把$x$和原来的父亲断开并连到它的$h$级祖先,作为新父亲最右的儿子③询问与根节点距离为$k$的点中最右的点是哪个点 用出栈入栈序$s_ ...

  10. 【状压DP】旅行商问题

    给定一张带权有向图,要求从顶点0出发,经过每个结点恰好一次后再返回0,求边权和的最小值. 2<=n<=15 0<=d(i,j)<=1000 样例 5 80 1 30 3 41 ...