D3.js实现区域图绘制功能

1、首先我们需要进入D3的官网下载相应的库文件。网址地址为:"https://d3js.org/",然后参考下面图片进行操作，下载库文件

2、然后我们打开Hbuilder软件，新建一个Web项目，本篇设置项目名称为D3Test,并将下载的库文件拷贝到项目的js目录下，具体导入后效果如图所示。

3、然后我们在index.html内引入d3.min.js,引入代码为“<s罕铞泱殳cript type="text/javascript" src="js/d3.min.js"></script>”,同时定义svg的宽度高度分布为500，并新建svg对象，具体代码如下图所示。

4、然后我们定义区域图的数据集，并绘制区域生成器，本篇中按照x(),y0(),y1()函数定义，最后出现结果为横向的。其中x()定义每个点的x轴值,y0()定义每个点的y起始值,y1()定义每个点的结束值。具体代码如下图所示。

5、然后我们添加路径，进行绘制图形信息。本篇中设置线的颜色的黑色，线宽为2px,区域填充为红色。具体代码如下图所示。

6、一切代码编写完毕后，我们进行浏览器打开测试，可以看到区域图已经绘制成功了。

7、下面我们再介绍下interpolate()函数，此函数用于设置区域图线的模式。支持模式有“step”,"basis"稆糨孝汶;,"cardinal"等等。使用方式比较简单，在区域生成器内加入即可，下面我们加入此函数，设置为basis模式。具体代码如下图所示

8、最后我们再次查看下生成样式，可以看到已经变成曲线形式的区域图了。