【d3.js教程04】互动第一步

来源：互联网发布：p身份证的软件编辑：程序博客网时间：2024/05/29 13:43

<!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>

当然这个代码还有一丁点儿问题当你点他的下边缘的时候，小球儿上去就下不来了，后面解决了再补充

1 0