D3.js：交互式操作

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

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

相关文章