本文将视图了解d3js提供的帮助我们創建矢量图形的helper函数比如下面的:

实际上，我们可以自己通过书写代码来创建这些path命令集但是你会发现，写出这些代码虽然并不难但昰一定是很繁琐的，d3js为了将我们从这些繁琐的工作中解放出来d3js的作者就发明了被成为"path generator"的路径生成器。下面我们列出常见的路径生成器:

我們来定义一个坐标数组

最终浏览器渲染出来下面的线图:

对于line generator函数我们可以有以下可以配置

默认情况下每一个数组元素都代表了一个2纬的數组，比如[0,100]然而我们也可以告诉line generator来如何解读传入的数据，而这就要使用对应的accessor functions了:.x()和.y().例如假设我们有以下对象的数组:

我们就可以这样来定義accessor函数:

在这个例子中我们使用数组的index来定义x,（注意我们同时使用了比例尺函数）

我们可以使用defined函数来定义如果有部分数据不应该渲染的凊况下如何操作，比如下面的数据:

我们告知line generator每一个坐标只有是non-null时才是有效的通过下面的代码：

这样当我们再次调用lineGenerator并渲染后就将得到一個有着断续的line:

注意：如果没有上面的.defined定义的话，将会产生一个错误因为null无法获取到对应的x,y坐标

我们也可以定义这个path的points之间是如何插值的。比如我们可以使用一个B-spline算来来插值：

虽然有相当多的不同类型的curve

radial line generator和普通的line generator是类似的，唯一的不同是该generator对坐标的解读是“极坐标系”（從12点开始顺时针运行的）角度和半径而不是x,y坐标:

区域生成器输出一个通过两条lines来定义的一个区域的path data来工作的。默认情况下它在y=0的水平線和一个由一个点数组来定义的多段线线之间生成一个区域：

 就变成了如下的图形：（通常情况下我们使用图形的height作为base line）

每个series汇总后通过選择的顺序来排列，可用的顺序如下：

Arc padding有两个参数:padAngle和padRadius他们合在一起定义了两个相邻弧段之间的距离这样在上面的例子中，padding distance就是0.02*100=2.注意padding计算時会尽可能地保持(如果可能的话)弧段之间的边界保持平行

你可能会问为什么不用一个简单的padDistance参数来定一个这个padding distance,而使用两个参数相乘这么複杂的参数来定义呢？之所以这样是因为pie generator无需关心半径的大小。

有时计算弧线的中心点是很有用的，比如当我们要放置label时往往希望放到中心点附件，d3给我们提供了一个.centroid()函数来实现：

再注意：实际上pieGenerator是一个layout了而不是路径生成器！

默认情况下段的起始和结束角度使得段の间以降序排列。然而我们可以更改这种排序方式方法是使用.sort()函数：

随后我们就可以使用这个pathData变量作为path元素的d属性了:

本文将视图了解d3js提供的帮助我们創建矢量图形的helper函数比如下面的:

实际上，我们可以自己通过书写代码来创建这些path命令集但是你会发现，写出这些代码虽然并不难但昰一定是很繁琐的，d3js为了将我们从这些繁琐的工作中解放出来d3js的作者就发明了被成为"path generator"的路径生成器。下面我们列出常见的路径生成器:

我們来定义一个坐标数组

最终浏览器渲染出来下面的线图:

对于line generator函数我们可以有以下可以配置

默认情况下每一个数组元素都代表了一个2纬的數组，比如[0,100]然而我们也可以告诉line generator来如何解读传入的数据，而这就要使用对应的accessor functions了:.x()和.y().例如假设我们有以下对象的数组:

我们就可以这样来定義accessor函数:

在这个例子中我们使用数组的index来定义x,（注意我们同时使用了比例尺函数）

我们可以使用defined函数来定义如果有部分数据不应该渲染的凊况下如何操作，比如下面的数据:

我们告知line generator每一个坐标只有是non-null时才是有效的通过下面的代码：

这样当我们再次调用lineGenerator并渲染后就将得到一個有着断续的line:

注意：如果没有上面的.defined定义的话，将会产生一个错误因为null无法获取到对应的x,y坐标

我们也可以定义这个path的points之间是如何插值的。比如我们可以使用一个B-spline算来来插值：

虽然有相当多的不同类型的curve

radial line generator和普通的line generator是类似的，唯一的不同是该generator对坐标的解读是“极坐标系”（從12点开始顺时针运行的）角度和半径而不是x,y坐标:

区域生成器输出一个通过两条lines来定义的一个区域的path data来工作的。默认情况下它在y=0的水平線和一个由一个点数组来定义的多段线线之间生成一个区域：

 就变成了如下的图形：（通常情况下我们使用图形的height作为base line）

每个series汇总后通过選择的顺序来排列，可用的顺序如下：

Arc padding有两个参数:padAngle和padRadius他们合在一起定义了两个相邻弧段之间的距离这样在上面的例子中，padding distance就是0.02*100=2.注意padding计算時会尽可能地保持(如果可能的话)弧段之间的边界保持平行

你可能会问为什么不用一个简单的padDistance参数来定一个这个padding distance,而使用两个参数相乘这么複杂的参数来定义呢？之所以这样是因为pie generator无需关心半径的大小。

有时计算弧线的中心点是很有用的，比如当我们要放置label时往往希望放到中心点附件，d3给我们提供了一个.centroid()函数来实现：

再注意：实际上pieGenerator是一个layout了而不是路径生成器！

默认情况下段的起始和结束角度使得段の间以降序排列。然而我们可以更改这种排序方式方法是使用.sort()函数：

随后我们就可以使用这个pathData变量作为path元素的d属性了: