What is the role of "Path Data Generator" in d3.js?

D3.js - Interview Questions

D3.js includes a set of Path Data Generators helper classes for generating SVG Path instructions.

d3.svg.line()

Path generator includes

* d3.svg.line() - create a new line generator

* d3.svg.line.radial() - create a new radial line generator

* d3.svg.area() - create a new area generator

* d3.svg.area.radial() - create a new radial area generator

* d3.svg.arc() - create a new arc generator

* d3.svg.symbol() - create a new symbol generator

* d3.svg.chord() - create a new chord generator

* d3.svg.diagonal() - create a new diagonal generator

* d3.svg.diagonal.radial() - create a new radial diagonal generator

Example :

//The data for our line
var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");