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

1. 添加交互

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

//画布大小
var width = 500, height = 500; // 在body里添加一个SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height); var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green"); 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);
});

2. 带有交互的柱形图

//画布大小
var width = 500, height = 500; // 在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") //把类里的 fill 属性清空
.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);  

  这段代码添加了鼠标移入(mouseover),鼠标移出(mouseout)两个事件的监听器。监听器函数中都使用了d3.select(this),表示选择当前的元素,this 是当前的元素,要改变响应事件的元素时这么写就好。
  mouseover 监听器函数的内容为:将当前元素变为黄色
  mouseout 监听器函数的内容为:缓慢地将元素变为原来的颜色(蓝色)

D3.js:交互式操作的更多相关文章

  1. D3.js 交互式操作

    与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 一.什么是交互 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更加 ...

  2. D3.js的v5版本入门教程(第十一章)——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  3. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

  4. 交互式数据可视化-D3.js(四)形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  5. 交互式数据可视化-D3.js(二)选择集和数据

    选择集 select和selectAll类似jquery: d3.select('body') d3.select('.body') d3.select('#body') d3.selectAll(' ...

  6. 【 D3.js 高级系列 — 1.0 】 文本的换行

    在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...

  7. 使用JavaScript和D3.js实现数据可视化

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...

  8. D3.js 整体展示篇

    近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

  9. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

随机推荐

  1. Android学习路径——Android的四个组成部分activity(一)

    一.什么是Activity? Activity简单的说就是一个接口.我们是Android手机上看到的每个界面就是一个activity. 二.Activity的创建 1.定义一个类继承activity, ...

  2. Re-installation failed due to different application signatures.的解决方案

    有时在安装不同版本apk文件时会出现Re-installation failed due to different application signatures.这样的提示 主要原因是安装的apk程序 ...

  3. touch命令功能

    touch命令功能   touch fileA,如果fileA存在,使用touch命令可更改这个文件或目录的日期时间,包括存取时间和更改时间:如果fileA不存在,touch命令会在当前目录下新建一个 ...

  4. Redis API与常用数据类型简介

    Redis API与常用数据类型简介 一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些 ...

  5. Oracle琐碎笔记2

    备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...

  6. WisDom .net开发框架设计 2

    随笔- 10  文章- 0  评论- 57  WisDom .net开发框架设计 (二)   WisDom .net 权限设计  1.前言        几乎在所有的管理的系统,都离不开用户,角色,权 ...

  7. Printk 标志优先级别

    #define KERN_EMERG                  "<0>"       /* 致命级:紧急事件消息,系统崩溃之前提示,表示系统不可用   */# ...

  8. 工作日志(DJ)

    ajax传参:  $.post("MAIN_JSHandler.ashx",                               { "retInfoCode&q ...

  9. iOS基础 - 静态库

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...

  10. Stream使用教程

    现在,计算机CPU运行速度的快速发展已经远远超过了内存的访问速度.越来越多的程序性能被内存带宽所限制,而不是计算机的CPU运行速率. Stream benchmark是一个简单的合成基准测试程序,衡量 ...