The path is the essential in SVG and can be used to make the advanced graphic shape. The path can be straight, wiggle, can be open and or closed as the chart. The SVG path is capable of drawing any shape like a circle, rectangle, ellipse, straight line, curves and so many.
What to learning here
- Generator for creating shape.
- Different types of interpolation,
- Drawing area Chart
To create path we need.
To create path we need one mandatory attribute called data as in line we have four mandatory attributes as x,y1,x2,y2. Syntax for drawing line as
Path = “Mx,y Lx,y Lx,y ………..Lx,y or Path = “Mx,y Lx,y Lx,y ………..Lx,yZ or
Path = “Mx,y Cx,y Cx,y ………..Cx,y
<svg height="200" width="400">
<path d="M100 0 L55 200 L125 200 Z" />
</svg>Note:
1. M -> Moveto , L -> Lineto (Draw straight line), H -> Horizontal lineto, V -> Vertical lineto, Z -> Closed the path back to first. C-> Curveto, S -> SmoothCurveto, Q -> Quadratic Bezier Curve, T -> Smooth quadratic Bézier curveto, A -> Elliptical Arc
2. All above character are case sensitive, as UpperCase for Absolute positioning of x,y and lowercase for relative positioning of x,y.
D3 Path Generator
The generator is both object and function. The D3 has more than 20 generators and still in growing in number, we have a line, area, arc, chord and so many. We can use D3 generator to create a different shape like the chart. Some of D3 generator are
d3.svg.line()
d3.svg.area()
d3.svg.arc()
d3.chord()
Create path using line generator
In code bellow we have dataArray is data for line or path, it has five objects containing new x and y line position.
var dataArray = [{x:5,y:5},{x:10,y:15},{x:20,y:7},{x:30,y:18},{x:40,y:10}];
var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");
var line = d3.line()
.x(function(d,i) { return d.x*6; })
.y(function(d,i) { return d.y*4; });
svg.append("path")
.attr("fill", "none")
.attr("stroke","blue")
.attr("d", line(dataArray)); The highlighted line is line generator and its output line or path element for us and it appears to line with 4 section.
The SVG line and D3 line are different, as SVG line can only be straight. The SVG line is an element and D3 line is a generator. It will not generate line element, it will generate path element. In above code, we supply the generator with an array containing 5 data points. The x,y will pass 5 different data point and calculate x, y value 5 times. The D3 will take 5 coordinate to make a line for us. By default path had fill attribute in line and we had set the fill attribute to none in our code so that we can see all line.
Drawing an area chart.
In the second example, we will create a chart with help of area generator. The, unlike the line generator the area generator, provides the shape in closed form. In the area generator, we need two y value. The one value will set the location of the upper line and the second one will set the location of the lower line as follow.
In our example in area generator y1 can represent data point on the chart, y1 is the active variable and drawing the upper boundary of the area chart. The y1 change with every data points and y0 will remain always constant in our case we set to height that is 200.
var dataArray = [25,27,28,30,35,40,45,56,77,80,94,107,100,120,140,156,166]
var dataYears = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'];
var height = 200;
var width = 500;
var area = d3.area()
.x(function(d,i){ return i*20; })
.y0(height)
.y1(function(d){ return height - d; });
var svg = d3.select("body").append("svg").attr("height", "100%").attr("width","100%");
svg.append("path").attr("d",area(dataArray)); The output of above code as follow
