D3---绘制散点图

一：实现效果

如以上视图显示，分别实现散点图和三个按钮的功能。

二：思路

1.添加画布（画图形一般首要的就是添加画布）。

2.添加合适的比例尺。

3.添加圆。

4.添加坐标轴。

5.添加三个按钮并实现相应的功能。

三：代码分析

1.添加画布。

<script>
            var wwidth=400;
			var hheight=400;
			var svg=d3.select("body").append("svg")
						.attr("width",wwidth)
						.attr("height",hheight);
</script>

2.添加合适的比例尺。

<script>
            var xScale=d3.scale.linear()
							.domain([0,1])
							.range([0,width]);
			var yScale=d3.scale.linear()
							.domain([0,1])
							.range([0,height]);
</script>

3.添加圆。由于要实现按钮的功能，所以添加圆的代码写到一个函数里比较简练。

<script>
function draw(){
				var circleUpdate=svg.selectAll("circle").data(dataset);