D3临摹作业(西安交大国家艺术基金数据可视化培训第21天)
程序员文章站
2024-02-13 17:14:10
...
第六章 D3动画与交互
第一节 D3动画
动画的效果在D3中被称为：·Transition
| 方法 | 方式 | 特点 | 代码 |
| transition() | 需要给出过渡变化前后不同的样式 | .attr("fill","red") .transition() .attr("fill","blue") |
|
| duration() | .transition() .duration(2000) |
||
| ease() | linear circle elastic bounce |
.transition() .ease("bounce") |
|
| delay() |
// 把所有圆圈改变半径
d3.selectAll("circle").transition() // 定义动画
.duration(750) // 动画持续时间
.delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始
.attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果
|
.案例：直方图生长动画
第二节 图形交互
三种交互工具：鼠标、键盘、触屏
交互类型：定时器、过渡、插值器、缓动、事件分派、拖动、缩放
案例：鼠标提示框交互
<html>
<head>
<title>交互-鼠标交互提示框图</title>
<style>
.tooltip{
font-family: simsun;
font-size: 14px;
width: 120;
height: auto;
position: absolute; /*设置为绝对定位*/
text-align: center;
border-style: solid;
border-width: 1px;
background-color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="../D3/d3.v4.min.js" charset="utf-8"></script>
<script>
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var width = w*0.98;
var height =h*0.96;
var dataset = [["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.pie()
.value(function(d){return d[1];});
var piedata = pie(dataset);
var outerRadius = 150; //外半径
var innerRadius = 0; //内半径，为0则中间没有空白
var arc = d3.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius); //设置外半径
var color = d3.scaleOrdinal(d3.schemeCategory10);
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (height/2) +")");
arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d);//将角度转为弧度（d3使用弧度绘制）
});
arcs.append("text")
.attr("transform",function(d){
var x = arc.centroid(d)[0] * 1.1;
var y = arc.centroid(d)[1] * 1.1;
return "translate(" + x + "," + y + ")";
})
.attr("text-anchor","middle")
.attr("font-size",function(d) {
return d.data[1] + "px";
})
.text(function(d){
return d.value + "%";
})
.on("mouseover",function(d,i){
if(d.data[1]<10){
d3.select(this)
.attr("font-size",24);
}
})
.on("mouseout",function(d,i){
if(d.data[1]<10){
d3.select(this)
.attr("font-size",function(d) {
return d.value + "px";
});
}
});
//添加一个提示框
var tooltip = d3.select("body")
.append("div")
.attr("class","tooltip")
.style("opacity",0.0); //块元素设置透明
arcs.on("mouseover",function(d){ //用鼠标的坐标为提示框定位
tooltip.html(d.data[0] + "浏览器市场份额" + "<br />" + d.data[1]+"%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px")
.style("opacity",1.0);
d3.select(this)
.style("cursor","move");
})
.on("mousemove",function(d){
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px");
})
.on("mouseout",function(d){
tooltip.style("opacity",0.0);
});
</script>
</body>
</html>
案例：键盘交互
<html>
<head>
<title>交互-键盘交互</title>
</head>
<body>
<script src="../D3/d3.v3.min.js" charset="utf-8"></script>
<h4>请按一下ESC、Enter和F2试试键盘交互……</h4>
<script type="text/javascript" language=JavaScript charset="UTF-8">
var width = 500, height = 500;
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");
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc
//要做的事情
alert('KeyCode=27（ESC）');
circle.style("fill","yellow")
}
if(e && e.keyCode==113){ // 按 F2
//要做的事情
alert('KeyCode=113（F2）');
}
if(e && e.keyCode==13){ // enter 键
//要做的事情
alert('KeyCode=13（Enter）');
}
};
</script>
</body>
</html>