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

1

实验

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

实验概述

通过D3完成一个基本的图表是可视化产品的基本组成部分。通过本实验完成比例尺的绘制，加载各种格式数据的操作，并绘制完整的柱状图，散点图，折线图，区域图和饼状图。

实验目的

完成本实验后，应该能够

使用D3比例尺绘制X,Y轴

使用D3加载各种格式数据

使用D3创建一个完整的柱状图

使用D3创建一个散点图

使用D3创建一个折线图

使用D3创建一个区域图

使用D3创建一个饼状图

实验准备

为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其必威体育精装版版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。

在服务器上下载本实验的代码模板，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。

实

实验步骤

步骤1使用D3比例尺绘制X,Y轴

进入实验环境：

1、使用编辑器打开MyDemo\Test-04\0401-add-axis.html

2、设置X轴比例尺

varx=d3.scaleBand().domain(series)

2

.rangeRound([0,width]).padding(0.1);

3、设置Y轴比例尺

vary=d3.scaleLinear()

.domain([0,d3.max(dataArray)])

.rangeRound([height,0]);

4、绘制X轴坐标

g.append(g)

.attr(class,axisaxis-x)

.attr(transform,translate(0,+height+))//放在最下面.call(d3.axisBottom(x));

5、绘制Y轴坐标

g.append(g)

.attr(class,axisaxis-y)//设置样式名称，方便以后自定义样式.call(d3.axisLeft(y).ticks(5));

6、使用Chrome打开界面呈现效果如下

7、使用声明的比例设定rect的宽高

7、

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打开界面呈现效果如下

步骤2使用D3加载各种格式数据

进入实验环境：

1、使用编辑器打开MyDemo/Test-04/0402-loading-data.html

2、加载JSON格式数据文件

d3.csv(../data/fruits.csv,function(error,data){

if(error){throwerror}

console.log(data);

//chartcode

});

3、加载CSV格式数据文件

d3.csv(../data/fruits.csv,function(error,data){

if(error){throwerror}

console.log(data);

//chartcode

});

4、加载TXT格式数据文件

d3.text(../data/textTest.txt,function(error,data){

console.log(data);

//chartcode

});

5、加载HTML文件

d3.html(../PPT_demo/PPT_Demo_01_helloD3js.html,function(error,data){

console.log(data);

//chartcode

});

6、加载XML格式数据文件

d3.xml(../data/xmlTest.xml,function(error,data){

3

4

console.log(data);

//chartcode

});

7、加载TSV格式数据文件

d3.tsv(../data/tsvTest.tsv,function(error,data){

console.log(data);

//chartcode

});

8、使用Chrome打开文件，并调出调试工具，在Co