【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> ~~~ 當然這個代碼還有一丁點兒問題 ? 當你點他的下邊緣的時候，小球兒上去就下不來了，后面解決了再補充