码迷,mamicode.com
首页 > Web开发 > 详细

D3.js 交互式操作

时间:2016-04-14 11:51:12      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

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

 

一、什么是交互

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

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

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

 

 

 

二、如何添加交互

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

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 交互式操作

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/5390417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!