d3.js学习笔记-07

目录

1 交互基础

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

1.1 鼠标的事件

var rect =svg.selectAll(" rect")//绑定数据.data(dataset)//获取enter部分.enter().append("rect")//添加rect元素，使其与绑定数组的长度一致.attr("fi11"，"steelblue") //设置颤色为steelblue//设置矩形的x坐标.attr("x",function(d,i，ireturn padding.left + xScale(i);}).attr("y",function (d){//设置矩形的y坐标return height- padding.bottom - yscale(d);}).attr("width",xScale.rangeBand()) //设置矩形的宽度.attr("height".function(d){//设置矩形的高度return yscale(d);}).on("mouseover" ,function(d,i){d3.select(this).attr("fi11","yellow"); //当鼠标移到元素上时，元素为黄色						}).on("mouseout",function (d,i){d3.select(this)//当鼠标移到元素上时，元素过渡到原来的颜色.transition().duration(500).attr("fill","steelblue");});
 

1.2 键盘的事件

d3.select("body").on("keydown",function()//keydown事件的监听器rects.attr("fi1l",function (d){if(d == String.fromCharCode(d3.event.keyCode)){//如果所按下的键与此rect元素上绑定的数据相同，则返回黄色return "yellow":}else{//否则返回黑色return "black";}});.on ("keyup" , funetion({//keyup事件的监听器rects.attr("fi11","black")；});
 

1.3 触屏

var circle = svg.append ("circle").attr("cx", 150).attr("y", 200).attr("r", 50).attr("fi11", "blue")//touchstart事件的监听器.on("touchstart", function(){d3.select (this).attr("fi11","yellow"); // 开始触摸时，圆变为黄色})//touchmove事件的监听器.on("touchmove", function(){var pos = d3.touches(this)[O];  //获取第一个触摸点d3.select(this).attr("cx",pos[0]) // 更改圆心坐标实现拖动.attr("cy",pos[1]);  ))//touchend事件的监听器.on("touchend", function(){d3.select(this).attr("fill","blue");  // 触摸结束时颜色变为蓝色});
 

2 事件

任何事件发生时，都会存储在d3.event中。
 

3 行为

3.1 拖拽

使用鼠标/触屏将元素从一个位置移到另一个位置
 

svg.selectAll("cirele"y.data(cireles)  // 绑定数据.enter().append("circle").attr("cx",function(d){ return d.cx;}).attr("cy", function(d){ return d.ey;}).attr("r".function(d){return d.r;}).attr("fi11", "b1ack" ).call(drag);  //调用drag函数,drag为参数//创建一个拖曳行为
 var drag = d3.behavior.drag().origin(function(d,i){  //设置起点坐标return {x:d.cx, y:d.cy} //起点坐标为被拖动物体的圆心坐标}).on("dragstart", function(a){ //dragstart的监听器console.log("拖曳开始");}).on("dragend", function(d){  //dragend的监听器console.log("搁曳结束");}).on("drag", function(d){d3.select(this)//选择当前被拖曳的元素// 将d3.event.x赋值给被绑定的数据，再将cx属性设置为该值.attr("cx", d.cx = d3.event.x )//将d3.event.y赋值给被绑定的数据，再将cy属性设置为该值.attr("cy". d.cy -d3.event.y );});
 

3.2 缩放

var g=svg.append("g").call(zoom);   // 为元素g添加缩放行为， 而不是添加在特定的圆上
 g.selectAll("circle").data(circles).enter().append("circle").attr("cx", function(d){ return d.cx;}).attr("cy", function(d){ return d.cy;}).attr("r",function(d){ return d.r; }).attr("fi11", "black");var zoom = d3.behavior.zoom()   //创建一个缩放行为.scaleExtent(1, 10)   //设置缩放的范围.on("zoom", function(d){d3.select(this).attr("transform", "translate(" +d3.event.translate + ")" + "scale(" +d3 .event.scale +")") // transition(x, y)平移; scale(s)缩放});
 

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶174-190.