D3 Shape

https://github.com/d3/d3/blob/master/API.md#shapes-d3-shape
https://www.d3indepth.com/shapes/
SVG的图形都是通过paht元素来做的,D3 Shape则提供了计算path的d属性的快捷方法

Arcs

方法	描述
d3.arc	create a new arc generator.
arc	generate an arc for the given datum.
arc.centroid(arguments…)	compute an arc’s midpoint.
arc.innerRadius([radius])	set the inner radius.
arc.outerRadius([radius])	set the outer radius.
arc.cornerRadius([radius])	set the corner radius, for rounded corners.
arc.startAngle([angle])	set the start angle.
arc.endAngle([angle])	set the end angle.
arc.padAngle([angle])	set the angle between adjacent arcs, for padded arcs.
arc.padRadius([radius])	set the radius at which to linearize padding.
arc.context([context])	set the rendering context.

Pies

方法	描述
d3.pie	create a new pie generator.
pie	compute the arc angles for the given dataset.
pie.value	set the value accessor.
pie.sort	set the sort order comparator.
pie.sortValues	set the sort order comparator.
pie.startAngle	set the overall start angle.
pie.endAngle	set the overall end angle.
pie.padAngle	set the pad angle between adjacent arcs.

Lines

方法	描述
d3.line	create a new line generator.
line	generate a line for the given dataset.
line.x	set the x accessor.
line.y	set the y accessor.
line.defined	set the defined accessor.
line.curve	set the curve interpolator.
line.context	set the rendering context.
d3.lineRadial	create a new radial line generator.
lineRadial	generate a line for the given dataset.
lineRadial.angle	set the angle accessor.
lineRadial.radius	set the radius accessor.
lineRadial.defined	set the defined accessor.
lineRadial.curve	set the curve interpolator.
lineRadial.context	set the rendering context.

Areas

方法	描述
d3.area	create a new area generator.
area	generate an area for the given dataset.
area.x	set the x0 and x1 accessors.
area.x0	set the baseline x accessor.
area.x1	set the topline x accessor.
area.y	set the y0 and y1 accessors.
area.y0	set the baseline y accessor.
area.y1	set the topline y accessor.
area.defined	set the defined accessor.
area.curve	set the curve interpolator.
area.context	set the rendering context.
area.lineX0	derive a line for the left edge of an area.
area.lineX1	derive a line for the right edge of an area.
area.lineY0	derive a line for the top edge of an area.
area.lineY1	derive a line for the bottom edge of an area.
d3.radialArea	create a new radial area generator.
radialArea	generate an area for the given dataset.
radialArea.angle	set the start and end angle accessors.
radialArea.startAngle	set the start angle accessor.
radialArea.endAngle	set the end angle accessor.
radialArea.radius	set the inner and outer radius accessors.
radialArea.innerRadius	set the inner radius accessor.
radialArea.outerRadius	set the outer radius accessor.
radialArea.defined	set the defined accessor.
radialArea.curve	set the curve interpolator.
radialArea.context	set the rendering context.
radialArea.lineStartAngle	derive a line for the start edge of an area.
radialArea.lineEndAngle	derive a line for the end edge of an area.
radialArea.lineInnerRadius	derive a line for the inner edge of an area.
radialArea.lineOuterRadius	derive a line for the outer edge of an area.

Curves
设置line的连接方式

var line = d3.line()
   .x(function(d) { return x(d.date); })
   .y(function(d) { return y(d.value); })
   .curve(d3.curveCatmullRom.alpha(0.5));

d3.curveBasis - a cubic basis spline, repeating the end points.
d3.curveBasisClosed - a closed cubic basis spline.
d3.curveBasisOpen - a cubic basis spline.
d3.curveBundle - a straightened cubic basis spline.
bundle.beta - set the bundle tension beta.
d3.curveCardinal - a cubic cardinal spline, with one-sided difference at each end.
d3.curveCardinalClosed - a closed cubic cardinal spline.
d3.curveCardinalOpen - a cubic cardinal spline.
cardinal.tension - set the cardinal spline tension.
d3.curveCatmullRom - a cubic Catmull–Rom spline, with one-sided difference at each end.
d3.curveCatmullRomClosed - a closed cubic Catmull–Rom spline.
d3.curveCatmullRomOpen - a cubic Catmull–Rom spline.
catmullRom.alpha - set the Catmull–Rom parameter alpha.
d3.curveLinear - a polyline.
d3.curveLinearClosed - a closed polyline.
d3.curveMonotoneX - a cubic spline that, given monotonicity in x, preserves it in y.
d3.curveMonotoneY - a cubic spline that, given monotonicity in y, preserves it in x.
d3.curveNatural - a natural cubic spline.
d3.curveStep - a piecewise constant function.
d3.curveStepAfter - a piecewise constant function.
d3.curveStepBefore - a piecewise constant function.
curve.areaStart - start a new area segment.
curve.areaEnd - end the current area segment.
curve.lineStart - start a new line segment.
curve.lineEnd - end the current line segment.
curve.point - add a point to the current line segment.

Links
d3.linkVertical - create a new vertical link generator.
d3.linkHorizontal - create a new horizontal link generator.
link - generate a link.
link.source - set the source accessor.
link.target - set the target accessor.
link.x - set the point x-accessor.
link.y - set the point y-accessor.
link.context - set the rendering context.
d3.linkRadial - create a new radial link generator.
radialLink.angle - set the point angle accessor.
radialLink.radius - set the point radius accessor.

Symbols
d3.symbol - create a new symbol generator.
symbol - generate a symbol for the given datum.
symbol.type - set the symbol type.
symbol.size - set the size of the symbol in square pixels.
symbol.context - set the rendering context.
d3.symbols - the array of built-in symbol types.
d3.symbolCircle - a circle.
d3.symbolCross - a Greek cross with arms of equal length.
d3.symbolDiamond - a rhombus.
d3.symbolSquare - a square.
d3.symbolStar - a pentagonal star (pentagram).
d3.symbolTriangle - an up-pointing triangle.
d3.symbolWye - a Y shape.
d3.pointRadial -
symbolType.draw - draw this symbol to the given context.

Stacks
d3.stack - create a new stack generator.
stack - generate a stack for the given dataset.
stack.keys - set the keys accessor.
stack.value - set the value accessor.
stack.order - set the order accessor.
stack.offset - set the offset accessor.
d3.stackOrderAppearance - put the earliest series on bottom.
d3.stackOrderAscending - put the smallest series on bottom.
d3.stackOrderDescending - put the largest series on bottom.
d3.stackOrderInsideOut - put earlier series in the middle.
d3.stackOrderNone - use the given series order.
d3.stackOrderReverse - use the reverse of the given series order.
d3.stackOffsetExpand - normalize the baseline to zero and topline to one.
d3.stackOffsetDiverging - positive above zero; negative below zero.
d3.stackOffsetNone - apply a zero baseline.
d3.stackOffsetSilhouette - center the streamgraph around zero.
d3.stackOffsetWiggle - minimize streamgraph wiggling.