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

一、什么是交互

　　交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。

　　例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。

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

二、如何添加交互

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

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 交互式操作的更多相关文章

  1. D3.js的v5版本入门教程（第十一章）——交互式操作

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

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

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

  3. 交互式数据可视化－D3.js（四）形状生成器

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

  4. 交互式数据可视化－D3.js（二）选择集和数据

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

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

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

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

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

  7. D3.js 整体展示篇

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

  8. D3.js学习记录

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

  9. d3.js读书笔记-1

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

随机推荐

  1. 训练集(train set) 验证集(validation set) 测试集(test set)

    转自:http://www.cnblogs.com/xfzhang/archive/2013/05/24/3096412.html 在有监督(supervise)的机器学习中,数据集常被分成2~3个, ...

  2. jquery 判断checkbox是否为空的三种方法

    //方法一: if ($("#checkbox-id")get(0).checked) { // do something } //方法二:也适用于单选按钮 if($('#chec ...

  3. hiho 第118周 网络流四·最小路径覆盖

    描述 国庆期间正是旅游和游玩的高峰期. 小Hi和小Ho的学习小组为了研究课题,决定趁此机会派出若干个调查团去沿途查看一下H市内各个景点的游客情况. H市一共有N个旅游景点(编号1..N),由M条单向游 ...

  4. SharePoint自动化系列——Content Type相关timer jobs一键执行

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 背景: 在SharePoint Central Administration->Monito ...

  5. sorl维护索引库sorl4j的使用

    1.维护索引库 添加:添加一个json格式的文件就可以. 修改:在solr中没有update,只需要添加一个新的文档,要求文档id和被修改文档的id一致.原理是先删除后添加. 删除:使用xml格式. ...

  6. Intent官方教程(3)各属性介绍

    Building an Intent An Intent object carries information that the Android system uses to determine wh ...

  7. Linux Source命令及脚本的执行方式解析

    转 http://www.51testing.com/html/38/225738-206878.html 当我修改了/etc/profile文件,我想让它立刻生效,而不用重新登录:这时就想到用sou ...

  8. VC++ 监控指定目录改变

    转载:http://www.cnblogs.com/doublesnke/archive/2011/08/16/2141374.html VC++实施文件监控:实例和详解 相关帮助: http://h ...

  9. 双4G LTE

    我们即将上市的Xplay3S将支持双4G LTE(TDD-LTE+FDD-LTE),那什么是4G LTE呢,今天来给大家科普下4G LTE网络知识. 什么是TDD-LTE/FDD-LTE? LTE是通 ...

  10. CentOS系统下各文件夹的作用

    linux下的文件结构,看看每个文件夹都是干吗用的 /bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的 ...