D3.js 交互式操作
与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。
一、什么是交互
交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。
例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。
用户用于交互的工具一般有三种：鼠标、键盘、触屏。
二、如何添加交互
对某一元素添加交互操作十分简单，代码如下：
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);
});
三、带有交互的柱形图
<html>
<head>
<meta charset="utf-8">
<title>交互式操作</title>
</head> <style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
} .axis text {
font-family: sans-serif;
font-size: 11px;
} .MyRect { } .MyText {
fill: white;
text-anchor: middle;
}
</style> <body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script> //画布大小
var width = 400;
var height = 400; //在 body 里添加一个 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height); //画布周边的空白
var padding = {left:30, right:30, top:20, bottom:20}; //定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]); //y轴的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]); //定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom"); //定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left"); //矩形之间的空白
var rectPadding = 4; //添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill","steelblue") //填充颜色不要写在CSS里
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
}); //添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
}); //添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis); //添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis); </script>
</body>
</html>
这段代码添加了鼠标移入（mouseover），鼠标移出（mouseout）两个事件的监听器。监听器函数中都使用了 d3.select(this)，表示选择当前的元素，this 是当前的元素，要改变响应事件的元素时这么写就好。
mouseover 监听器函数的内容为：将当前元素变为黄色
mouseout 监听器函数的内容为：缓慢地将元素变为原来的颜色（蓝色）
D3.js 交互式操作的更多相关文章
- D3.js的v5版本入门教程（第十一章）——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
- 【 D3.js 高级系列 — 9.0 】 交互式提示框
一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...
- 交互式数据可视化－D3.js（四）形状生成器
使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...
- 交互式数据可视化－D3.js（二）选择集和数据
选择集 select和selectAll类似jquery: d3.select('body') d3.select('.body') d3.select('#body') d3.selectAll(' ...
- 【 D3.js 高级系列 — 1.0 】 文本的换行
在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...
- 使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...
- D3.js 整体展示篇
近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- d3.js读书笔记-1
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...
随机推荐
- API判断网站IP地址，国家区域
直接访问http://api.wipmania.com/jsonp 还有经纬度
- php 计算两个日期之间的差，得出：年月日时分秒
<?php$time1 = "2008-6-15 11:49:59";//第一个时间$time2 = "2007-5-5 12:53:28";//第二个时 ...
- 山东理工大学第七届ACM校赛-飞花的鱼塘 分类： 比赛 2015-06-26 10:30 43人阅读 评论(0) 收藏
飞花的鱼塘 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 一日,飞花壕在稷下湖游玩,忽然,飞花巨有了一个养鱼的想法,于是,他大手 ...
- shell脚本之if语句
一.前言 结构化编程中,主要有三种结构:顺序.分支.循环.由此可见分支判断的重要性. 而且在shell编程中往往会遇到进行判断的情况,比如:判断文件是否存在.目录是否存在等等. 二.if语句的结构 i ...
- dot函数
dot函数是两个向量的点乘,注意lua中dot函数的写法 th> a [torch.DoubleTensor of size 1x3] [.0002s] th> b [torch.Doub ...
- for循环以及复杂if else 例题
for循环语句 例一. 请输入一个整数,求1加到这个整数的和 例二 请从1到100 以内和7 有关的数字 例三,请设计一个游戏,前20关每关的分数是本身,21到30 是10分每关.31到40是20分每 ...
- ContentProvider官方教程(8)自定义MIME
MIME Type Reference Content providers can return standard MIME media types, or custom MIME type stri ...
- SELECT INTO FROM mysql Undeclared variable
使用SELECT INTO FROM进行数据表和数据的复制时,会提示Error Code: 1327. Undeclared variable: 这是因为mysql 数据库不支持 SELECT INT ...
- BASE64,MD5,SHA,HMAC加密與解密算法(java)
package com.ice.webos.util.security; import java.io.UnsupportedEncodingException; import java.math.B ...
- Application 应用程序对象使用介绍
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoApplicatio ...