v4版本的D3js源码和Api已经齐全的demo

# d3-shape 在可视化中经常会使用到一些图形元素，比如[symbols](#symbols), [arcs](#arcs), [lines](#lines) 和 [areas](#areas). 矩形元素可以很容易的使用SVG或Canvas绘制，而其他就比较复杂了，比如扇形和样条曲线等。这个模块提供了许多形状生成器以便直接使用。 这些形状可以由数据驱动:每个生成器都提供了将输入数据映射到可视化元素的接口。比如你可以为一个时间序列定义一个线条生成器: ```js var line = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.value); }); ``` 这个线条生成器可以计算出path元素的`d`属性: ```js path.datum(data).attr("d", line); ``` 或者也可以将其渲染到Canvas 2D上下文中: ```js line.context(context)(data); ``` 参考[Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12)获取更多信息. ## Installing NPM等安装方法略 ```html <script src="https://d3js.org/d3-path.v1.min.js"></script> <script src="https://d3js.org/d3-shape.v1.min.js"></script> <script> var line = d3.line(); </script> ``` [Try d3-shape in your browser.](https://tonicdev.com/npm/d3-shape) ## API Reference * [Arcs(弧)](#arcs) * [Pies(饼)](#pies) * [Lines(线)](#lines) * [Areas(区域面积)](#areas) * [Curves(曲线)](#curves) * [Custom Curves(定制曲线)](#custom-curves) * [Links](#links) * [Symbols(符号)](#symbols) * [Custom Symbol Types(定制符号)](#custom-symbol-types) * [Stacks(堆叠/栈)](#stacks) ### Arcs [<img alt="Pie Chart" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/pie.png" width="295" height="295">](http://bl.ocks.org/mbostock/8878e7fd82034f1d63cf)[<img alt="Donut Chart" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/donut.png" width="295" height="295">](http://bl.ocks.org/mbostock/2394b23da1994fc202e1) arc生成器可以生成圆形的或者环形的扇形，可以被用在pie或环形图中。如果[start](#arc_startAngle) 和 [end](#arc_endAngle)之间的插值大于[τ](https://en.wikipedia.org/wiki/Turn_\(geometry\)#Tau_proposal)，则arc生成器会产生一个完整的圆或环。如果小于[τ](https://en.wikipedia.org/wiki/Turn_\(geometry\)#Tau_proposal)则arc生成器可以设置[rounded corners(圆角)](#arc_cornerRadius) 和 [angular padding(间隙)](#arc_padAngle)。Arcs总是以<0,0>位中心，需要使用transform(参考: [SVG](http://www.w3.org/TR/SVG/coords.html#TransformAttribute), [Canvas](http://www.w3.org/TR/2dcontext/#transformations))来对其进行平移。 参考[pie generator](#pies), pie生成器可以根据一组数据计算出每个元素的起止角度，然后使用arc生成器根据计算后的数据绘制扇形或圆环。 <a name="arc" href="#arc">#</a> d3.<b>arc</b>() [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js "Source") 构建一个新的默认的arc生成器 <a name="_arc" href="#_arc">#</a> <i>arc</i>(<i>arguments…</i>) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L89 "Source") 根据指定的*arguments*生成一个arc。*arguments*可以是任意的形式的，但是要包含必要的信息，比如使用一个包含半径信息(内外半径)和角度信息(起止角度)的对象绘制arc: ```js var arc = d3.arc(); arc({ innerRadius: 0, outerRadius: 100, startAngle: 0, endAngle: Math.PI / 2 }); // "M0,-100A100,100,0,0,1,100,0L0,0Z" ``` 如果已经定义了半径信息和角度信息，则就不需要再次指定了，比如: ```js var arc = d3.arc() .innerRadius(0) .outerRadius(100) .startAngle(0) .endAngle(Math.PI / 2); arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z" ``` 如果arc生成器包含了[context](#arc_context)上下文，则会调用一系列[path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods)将arc渲染到上下文中。否则返回一个[path data](http://www.w3.org/TR/SVG/paths.html#PathData)字符串。 <a name="arc_centroid" href="#arc_centroid">#</a> <i>arc</i>.<b>centroid</b>(<i>arguments…</i>) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L224 "Source") 计算参数所表示的弧的中间点[*x*,*y*]. 计算方法为([startAngle](#arc_startAngle) + [endAngle](#arc_endAngle)) / 2 and ([innerRadius](#arc_innerRadius) + [outerRadius](#arc_outerRadius)) / 2. 例如: [<img alt="Circular Sector Centroids" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/centroid-circular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/9b5a2fd1ce1a146f27e4)[<img alt="Annular Sector Centroids" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/centroid-annular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/c274877f647361f3df7d) 要注意这个不是几何中心，因为几何中心可能位于圆弧外侧。 <a name="arc_innerRadius" href="#arc_innerRadius">#</a> <i>arc</i>.<b>innerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L230 "Source") 设置或获取内半径。如果没有指定*radius*则返回当前的内半径，默认为: ```js function innerRadius(d) { return d.innerRadius; } ``` 如果*radius*为函数，则可以方便的构造出一个基于极坐标系统的堆叠图。经常结合 [sqrt scale](https://github.com/d3/d3-scale#sqrt) 一起使用. 如果内半径比外半径大，则内半径和外半径会被交换。负值视为0. <a name="arc_outerRadius" href="#arc_outerRadius">#</a> <i>arc</i>.<b>outerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L234 "Source") 设置或获取外半径。如果没有指定*radius*则返回当前的外半径，默认为: ```js function outerRadius(d) { return d.outerRadius; } ``` 如果*radius*为函数，则可以方便的构造出一个基于极坐标系统的堆叠图。经常结合 [sqrt scale](https://github.com/d3/d3-scale#sqrt) 一起使用. 如果内半径比外半径大，则内半径和外半径会被交换。负值视为0. <a name="arc_cornerRadius" href="#arc_cornerRadius">#</a> <i>arc</i>.<b>cornerRadius</b>([<i>radius</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L238 "Source") 设置或获取拐角半径，默认为: ```js function cornerRadius() { return 0; } ``` 如果拐角半径比0大，则根据其值设置拐角大小。拐角的作用如下图: [<img alt="Rounded Circular Sectors" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/rounded-circular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/e5e3680f3079cf5c3437)[<img alt="Rounded Annular Sectors" src="https://raw.githubusercontent.com/d3/d3-shape/master/img/rounded-annular-sector.png" width="250" height="250">](http://bl.ocks.org/mbostock/f41f50e06a6c04828b6e) <a name="arc_startAngle" href="#arc_startAngle">#</a> <i>arc</i>.<b>startAngle</b>([<i>angle</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L246 "Source") 设置或获取弧形的起始角度并返回arc生成器。默认为: ```js function startAngle(d) { return d.startAngle; } ``` *angle*以弧度的形式定义0度对应12点钟方向，顺时针开始计算。如果|endAngle - startAngle| ≥ τ则会生成一个完整的圆或环。 <a name="arc_endAngle" href="#arc_endAngle">#</a> <i>arc</i>.<b>endAngle</b>([<i>angle</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L250 "Source") 设置或获取弧形的终止角度并返回arc生成器。默认为: ```js function endAngle(d) { return d.endAngle; } ``` *angle*以弧度的形式定义0度对应12点钟方向，顺时针开始计算。如果|endAngle - startAngle| ≥ τ则会生成一个完整的圆或环。 <a name="arc_padAngle" href="#arc_padAngle">#</a> <i>arc</i>.<b>padAngle</b>([<i>angle</i>]) [<>](https://github.com/d3/d3-shape/blob/master/src/arc.js#L254 "Source") 设置或获取间隙角度，间隙可以使得相邻的扇形之间隔开�