本篇主要介绍如何利用D3.js实现区域图的绘制功能。众所周知，D3.js作为前端使用的绘制图表的工具，其具有强大的功能，D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。
工具/原料
Hbuilder工具
方法/步骤
1
首先我们需要进入D3的官网下载相应的库文件。网址地址为:'https://d3js.org/',然后参考下面图片进行操作，下载库文件
2
然后我们打开Hbuilder软件，新建一个Web项目，本篇设置项目名称为D3Test,并将下载的库文件拷贝到项目的js目录下，具体导入后效果如图所示。
3
然后我们在index.html内引入d3.min.js,引入代码为“”,同时定义svg的宽度高度分布为500，并新建svg对象，具体代码如下图所示。
4
然后我们定义区域图的数据集，并绘制区域生成器，本篇中按照x(),y0(),y1()函数定义，最后出现结果为横向的。其中x()定义每个点的x轴值,y0()定义每个点的y起始值,y1()定义每个点的结束值。具体代码如下图所示。
5
然后我们添加路径，进行绘制图形信息。本篇中设置线的颜色的黑色，线宽为2px,区域填充为红色。具体代码如下图所示。
6
一切代码编写完毕后，我们进行浏览器打开测试，可以看到区域图已经绘制成功了。
7
下面我们再介绍下interpolate()函数，此函数用于设置区域图线的模式。支持模式有“step”,'basis','cardinal'等等。使用方式比较简单，在区域生成器内加入即可，下面我们加入此函数，设置为basis模式。具体代码如下图所示
8
最后我们再次查看下生成样式，可以看到已经变成曲线形式的区域图了。
注意事项
1
本篇主要简单介绍D3.js生成区域图最简单的方法，抛砖引玉，希望激起各位学习D3的热情。
2
当然区域图还可以化成纵向的，用的函数有y(),x0(),x1()。