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

【d3.js教程04】互动第一步_第1张图片


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

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

你可能感兴趣的:(d3,d3.js,d3.js教程,d3入门)