数据可视化基础数据可视化基础实验4：通过D3.js完成基本的数据图表

1实验概述通过D3完成一个基本的图表是可视化产品的基本组成部分。通过本实验完成比例尺的绘制，加载各种格式数据的操作，并绘制完整的柱状图，散点图，折线图，区域图和饼状图。实验目的完成本实验后，应该能够使用D3比例尺绘制X,Y轴使用D3加载各种格式数据使用D3创建一个完整的柱状图使用D3创建一个散点图使用D3创建一个折线图使用D3创建一个区域图使用D3创建一个饼状图实验准备为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实实验步骤进入实验环境：1、使用编辑器打开MyDemo\Test-04\0401-add-axis.htmlvarx=d3.scaleBand().domain(series)2.rangeRound([0,width]).padding(0.1);vary=d3.scaleLinear().domain([0,d3.max(dataArray)]).rangeRound([height,0]);g.append("g").attr("class","axisaxis-x").attr("transform","translate(0,"+height+")")//放在最下面.call(d3.axisBottom(x));g.append("g").attr("class","axisaxis-y")//设置样式名称，方便以后自定义样式.call(d3.axisLeft(y).ticks(5));6、使用Chrome打开界面呈现效果如下使用声明的比例设定rect的宽高g.selectAll(".rect-bar").data(dataArray).enter().append("rect").attr("class","rect-bar").attr("width",x.bandwidth()).attr("height",function(d){returnheight-y(d)}).attr("x",function(d,i){returnx(series[i]);.attr("y",function(d){returny(d);8、使用Chrome打开界面呈现效果如下进入实验环境：1、使用编辑器打开MyDemo/Test-04/0402-loading-data.html2、加载JSON格式数据文件d3.csv("../data/fruits.csv",function(error,data){if(error){throwerror}console.log(data);//chartcodeCSV格式数据文件d3.csv("../data/fruits.csv",function(error,data){if(error){throwerror}console.log(data);//chartcode4、加载TXT格式数据文件d3.text("../data/textTest.txt",function(error,data){console.log(data);//chartcoded3.html("../PPT_demo/PPT_Demo_01_helloD3js.html",function(error,data){console.log(data);//chartcode载XML格式数据文件d3.xml('../data/xmlTest.xml',function(error,data){34console.log(data);//chartcodeTSV格式数据文件d3.tsv("../data/tsvTest.tsv",function(error,data){console.log(data);//chartcode8、使用Chrome打开文件，并调出调试工具，在Console面板中即可查看数据输出效果。数d3.csv("../data/ShangHaiWeather.csv",function(d){console.log(d);if(d["时间"].indexOf("20150701")>=0){d["雨量"]=parseFloat(d["雨量"]);//数据类型转换returnd;}},function(error,data){if(error){throwerror}//根据站点名称进行分组，类似sql的groupbyvargroupData=d3.nest().key(function(d){returnd["站点"]}).rollup(function(leaves){returnd3.sum(leaves,function(d){returnd["雨量"]});//这个作用是直接将分组后的数据直接进行统计}).entries(data);console.log(groupData);5使用编辑器打开MyDemo\Test-04\0403-chart-bar.html根据已声明的X，Y比例尺，设定值域x.domain(groupData.map(function(d){returnd.key}));y.domain([0,d3.max(groupData,function(d){returnd.value})]);g.append("g").attr("class","axisaxis-x").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x));g.append("g").attr("class","axisaxis-y").call(d3.axisLeft(y).ticks(10));绘制矩形g.selectAll(".rect-bar").data(groupData).enter().append("rect").attr("class","rect-bar").attr("x",function(d){returnx(d.key);}).attr("y",function(d){returny(d.value);}).attr("width",x.bandwidth()).attr("height",function(d){returnheight-y(d.value)})添加显示文字g.selectAll(".tip-text").data(groupData).enter().append("text").attr("x",function(d){returnx(d.key)+x.bandwidth()/2;}).attr