【d3.js教程04】互动第一步 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_571610047d073.jpg) ~~~ <!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> ~~~ 当然这个代码还有一丁点儿问题当你点他的下边缘的时候，小球儿上去就下不来了，后面解决了再补充