大数据可视化技术-echarts03（D3获取数据）

使用D3绘制图形，主要分为以下几个步骤完成：

1、引入Echarts；
2、为ECharts准备一个具备大小的Dom；
3、加载数据和整理数据；
4、设定图表的配置项；
5、使用指定的配置项和数据显示图表；
6、添加和修改图表样式。

使用D3读取数据

先打开iris.csv文件查看，共150行6列，前50行数据为山鸢尾的花萼和花瓣的长宽，51-100行的数据为杂色鸢尾的花萼和花瓣的长宽，101-150行为维吉尼亚鸢尾的花萼和花瓣的长宽，了解数据后，在加载完数据后，对数据进行处理。
通过D3在index.html页面的< script >和标签之间读取csv数据，并将数据按照花的类别整理成3组，为后面绘制散点图做准备，数据整理后，每种花各50个，都是以[[length,width],[ length,width],[ length,width],……]形式的数组保存。代码如下所示：

<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			
			// 使用D3获取数据
			setosa = [];    
			versicolor = [];
			virginica = [];
			petal_length = [];
			d3.csv("Data/iris.csv",function(error,data){
				// console.log(data);
				
				for(var i=0;i<data.length;i++){
					// 前50条数据
					if(i<50){
					// parseFloat() 函数可解析一个字符串，并返回一个浮点数。
						setosa[i] = [parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
					}else if(i>=100){
					// 后50条数据
						versicolor[i-100] = [parseFloat(data[i].PetalLength),parseFloat(data[i].PetalWidth)];
					}else{
					// 中间50条数据
						virginica[i-50] = [parseFloat(data[i].PetalLength), parseFloat(data[i].PetalWidth)];
					}
					petal_length.push(parseFloat(data[i].PetalLength));
				}
				
				// 计算三种花的花瓣长度平均值，配置项中需要用到
				var setosa_mean = d3.mean(petal_length.slice(0,50));
				var versicolor_mean = d3.mean(petal_length.slice(50,100));
				var virginica_mean = d3.mean(petal_length.slice(100,150));
				
				// 配置项代码
				var option = {
					// 标题
					title:{
						text:'鸢尾花可视化',
						left:300
					},
					// 网格
					grid:{
						left:'40%',
						containLabel:true
					},
					tooltip:{
						showDelay:0,
						
						formatter:function(params){
							if(params.value.length > 1){
								return params.seriesName + ':<br/>' + params.value[0] + 'cm' + params.value[1] + 'cm';
							}else{
								return params.seriesName + ':<br/>' + params.name + ':' + params.value + 'cm';
							}
						},
						axisPointer:{
							show:true,
							type:'cross',
							lineStyle:{
								type:'dashed',
								width : 1
							}
						}
					},
					toolbox:{
						feature:{
							saveAsImage:{
								type:'png'
							},
							dataView:{},
							restore:{},
							dataZoom:{},
							brush:{
								type:['rect','polygon','clear']
							}
						},
						right:100,
					},
					brush:{},
					legend:{
						data:['山鸢尾','杂色鸢尾','维吉尼亚鸢尾'],
						left:'center',
						bottom:10
					},
					xAxis:[{
						type:'花瓣宽度',
						type:'value',
						scale:true,
						axisLabel:{
							formatter:'{value} cm'
						},
						splitLine:{
							show:true
						}
					}],
					yAxis:[{
						name:'花瓣长度',
						type:'value',
						scale:true,
						axisLabel:{
							formatter:'{value} cm'
						},
						splitLine:{
							show:false
						}
					}],
					series:[{
						name:'山鸢尾',
						type:'scatter',
						data:setosa,
						markArea:{
							silent:true,
							itemStyle:{
								color:'transparent',
								borderWidth:1,
								borderType:'dashed'
							},
							data:[[{
								name:'setosa分布区间',
								yAxis:'min',
								xAxis:'min'
							},{
								xAxis:'max',
								yAxis:'max'
							}]]
						},
						markPoint:{
							data:[
								{type:'max',name:'最大值'},
								{type:'min',name:'最小值'}
							]
						},
						markLine:{
							lineStyle:{
								type:'solid'
							},
							data:[
								{type:'average',name:'平均值'},
								{xAxis:setosa_mean},
							]
						}
					},{
						name:'杂色鸢尾',
						type:'scatter',
						data:versicolor,
						markArea:{
							silent:true,
							itemStyle:{
								color:'transparent',
								borderWidth:1,
								borderType:'dashed'
							},
							data:[[{
								name:'versicolor分布区间',
								yAxis:'min',
								xAxis:'min'
							},{
								xAxis:'max',
								yAxis:'max'
							}]]
						},
						markPoint:{
							data:[
								{type:'max',name:'最大值'},
								{type:'min',name:'最小值'}
							]
						},
						markLine:{
							lineStyle:{
								type:'solid'
							},
							data:[
								{type:'average',name:'平均值'},
								{xAxis:versicolor_mean},
							]
						}
					},{
						name:'维吉尼亚鸢尾',
						type:'scatter',
						data:virginica,
						markArea:{
							silent:true,
							itemStyle:{
								color:'transparent',
								borderWidth:1,
								borderType:'dashed'
							},
							data:[[{
								name:'virginica分布区间',
								yAxis:'min',
								xAxis:'min'
							},{
								xAxis:'max',
								yAxis:'max'
							}]]
						},
						markPoint:{
							data:[
								{type:'max',name:'最大值'},
								{type:'min',name:'最小值'}
							]
						},
						markLine:{
							lineStyle:{
								type:'solid'
							},
							data:[
								{type:'average',name:'平均值'},
								{xAxis:virginica_mean},
							]
						}
					}]
				};
				// 指定配置项显示图标
				myChart.setOption(option);
			});