【d3.js教程04】互动第一步
最后更新于：2022-04-01 14:18:02
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<svg></svg>
<script type="text/javascript">
var svg = d3.select("svg");
svg.attr("width",1000)
.attr("height",1000);
var circle = svg.append("circle");
circle.attr("cx",300) //圆心的横坐标
.attr("cy",300) //圆心的纵坐标
.attr("r",100) //圆的半径
.attr("fill","steelblue");
/*鼠标移入事件*/
circle.on("mouseover",function(){
circle.transition()
.duration(50)
.ease("linear")
.attr("r",110); //移入将半径变大
});
/*鼠标移出事件*/
circle.on("mouseleave",function(){
circle.transition()
.duration(50)
.ease("linear")
.attr("r",100); //移出将半径变小
});
/*鼠标点击事件,等效于click*/
circle.on("mousedown",function(){
circle.transition()
.duration(50)
.ease("linear")
.attr("transform","translate("+0+","+(-30)+")") //先向上移动一点儿
.transition()
.duration(500)
.ease("elastic")
.attr("transform","translate("+0+","+(0)+")") //然后跳下来
});
</script>
</body>
</html>
~~~
当然这个代码还有一丁点儿问题 当你点他的下边缘的时候，小球儿上去就下不来了，后面解决了再补充