Learning D3.js D3 's path explanation

Reprint: Http://jsbin.com/omajal/23/edit?html,outputsvg's path tag is called a "shape that can form any shape"

SVG path can draw any shape's shapes, including rectangles, circles, ellipses, polylines, polygons, lines, curves, etc.
The W3 standard for SVG path is defined as follows
The SVG path represents the outline of a shape, can be stroked, filled, used as a clipping path, or any combination of the three.
W3 provides an image metaphor for using pen and paper to represent SVG's path
* Imagine a pen placed on a piece of paper.
* The pen is in contact with the paper at some point.
* Tip moved to another place.
* The path between these two points can be a straight line or a curve.
* The curve can be an arc, a cubic curve or two Bezier curves.
This means that we can use the SVG path to make any type of SVG shape.

Example of SVG path

The shape of the SVG path element is defined by an attribute: D. (This is why the previous tutorial can draw a circle by setting D)

D This property contains a series of methods and parameters. So we can call this attribute a "micro language".

These methods and parameters actually tell the computer to "how to move your pen on paper".

Below we will introduce some classic notation, including MoveTo (set a starting point), LineTo (draw a straight line), Curveto (Draw a curve with three Bezier curves), Arc (ellipse or arc) and Closepath (closed path).

First we can draw a triangle

<svg width= "60" height= "> <pathd=" M-Ten L 75 L "stroke=" Red "stroke-width=" 2 "fill=" None "/> </svg>

The value of the D attribute "M 10 25 ..." is the following meaning: (coordinates x in front y in the rear)

• M 10 25– Drop the pen in 10, 25
• L 10 75– draw a line from start 10 25 to 10 75
• L 60 75– Draw a line from start 10 75 to 60 75
• L 10 25– draw a line from start 60 75 to 10 25

Attention! (M, L) is uppercase and represents an absolute position. When relative positions are used, lower case. SVG Path Micro-language

How exactly to describe path, see below:

Command | parameter | can repeat | explain
M (M) | x, y | cannot | move the nib to a new position, but because there is no pen, the graphic is not "painted." all paths need to start with m/m.
l (L) | x, y | can | Draw a line from the current point to coordinates x, y
h (h) | x| | Draw horizontal lines, draw a horizontal line from the current point, and X at the horizontal axis
V (v) | y | To draw a vertical line, draw a perpendicular from the current point, and a vertical axis at Y
C (c) | x1 y1 x2 y2 x y| Energy | Draw a curve. Start at the current point and the endpoint is x, Y. Use (x1,y1) as the control point for the start curve, using (x2,y2) as the control point for the end stage
s (s) | x2 y2 x y | can | draw a smooth curve. Draws a three-cubic Bezier curve with the current point as its starting point, and X, Y for the end line. Note that this is a shorthand, this curve also has two control points, but at this time X1 y1 and x2,y2 is symmetrical, you can directly write x2y2 this one.
q (q) | x1 y1 x y | can | two cubic Bezier curve. Draws a two-cubic Bezier curve that starts at the current point and X, y as the end. X1 Y1 as Control point
t (t) | x y| | Draws a shorthand for two quadratic Bezier curves. Draws a two-cubic Bezier curve that starts at the current point and X, y as the end. The control point is assumed to be a reflection of the control point of the previous command relative to the current point. This control point is the current point if the previous command does not exist, or if the previous command is not a two-time Bezier curve command or a smooth two-time Bezier curve command.
A (a) | rx ry x-axis-rotation large-arc-flag sweep-flag x y | can | ellipse ARC command creates an elliptical arc between the current point and the specified endpoint (x, y).
Z (z) |none | cannot | close the path. There will be a line connecting the path to the last point and beginning.

With respect to the parameters of the ellipse, I made a simple demo with Raphael, and you can read it Http://jsbin.com/omajal/23/edit
Two schematic diagrams with two Bezier curves and three Bezier curves are also available

Example of D3.js Path

D3.js contains a number of convenient ways to create a path, before we explore these methods, we'll look at a simple example of using D3JS to draw a line.

Typically, in a polyline, there are a lot of x, Y points, and these point 22 combinations become polylines.

For example, data like this

12	<code>[{"x": 1, "Y": 5}, {"X": $, "y": 20},{"x": +, "y": 10},{"x": "Y": 40},{"x": +, "Y": 5}, {"X": +, "Y": 60}] ;</code>

Here we need a function to translate these XY points into the path "micro language" explained above

12	<code>d3.svg.line () </code>

This path data generator function can use our data to create a path. Before using it, we need to tell d3js how to get the x, y coordinates in the data.

So we create a function that can easily get the x, y coordinates of the data.

<code>var linefunction = D3.svg.line (). x (function (d) {return d.x;})                          . Y (function (d) {return d.y;}) . interpolate ("linear");</code>

The function above can extract the X, y data from an array of data. After that, through the interpolate setting, the line is used to connect each point. You will then return to a path.
Let's take a look at the complete example

1234567891011121314151617181920212223

<code>//data var linedata=[{"x":1,    "y": 5},  {"x":20,   "y": 20},                  {"x": 40,    "y": 10},{"x":60,   "Y":40},                  {"x":80,   "y": 5},  {"x": +, "y": 60}]; // Line Generator Var linefunction = d3.svg.line ()                           .x (function (d) {returnd.x;})                    &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;.Y (function (d) {returnd.y;})                           .interpolate ("linear");  //svg container var svgcontainer = d3.select ("Body"). Append ("SVG")                                       .attr ("width", 200)                                      . attr ("height");  //throws the path into the container--Linedata and Linefunction, and assigns the attribute to D var linegraph =  Svgcontainer.append ("path")                              .attr ("D", Linefunction (linedata))                        &nBsp;     .attr ("Stroke", "blue")                               .attr ("Stroke-width", 2)                              .attr ("Fill", "none") ;</code>

And then we get this picture:

. attr ("D", Linefunction (Linedata)) is a critical statement. Here we pass the data to Linefunction, return the "micro-language" of path, then assign a value to the D attribute,
Here we use the. Append ("path") directly, because we only need to generate a polyline based on the existing data.
Remember that the first tutorial explained the SelectAll (),. Enter (), append () combination, which is done for multiple sets of data. The above does not need to determine how many sets of data, and then partition how much space, put graphics and what.

The function of the. interpolate ("linear") tells D3js to use a straight line to connect points.
D3.js provides 11 different lines that can be manipulated by the d3.svg.line () function. There are a lot of professional nouns here, I think translation is not as good as translation. Let's see it for you.

• linear–piecewise linear segments, as in a polyline.
• step-before–alternate between vertical and horizontal segments, as in a step function.
• step-after–alternate between horizontal and vertical segments, as in a step function.
• basis–a b-spline, with control point duplication on the ends.
The path generator,

• D3.svg.line (), is both a function and an object, which means that you can use him as a method to build path, or you can change its own properties with some extra methods.
  and he also supports chaining calls
  like D3.svg.line () and there are many more path generators. For example

  • d3.svg.line– line Path generator
  • d3.svg.line.radial– radial path
  • d3.svg.area– zone path
  • d3.svg.area.radial– Radial Region path
  • D3.svg.arc-Circle and ARC path
  • d3.svg.symbol– Symbol Path
  • D3.svg.chord-chord Path is also something we need to use for this series of tutorials!
  • d3.svg.diagonal–diagonal path
  • d3.svg.diagonal.radial–diagonal radial path

  These builds The D3JS driver has read and write methods, so it is very convenient to generate a variety of path.

Learning D3.js D3 's Path explanation