D3.js line.curve() method Last Updated : 19 Aug, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report The d3.line.curve() method is used to give a curve to our line. D3.js provides several curve factories that can be used to give different curves. Syntax: d3.line.curve(curve_factory); Parameters: curve_factory: type of curve to be given to the line. Return Value: This method has no return value. Example 1: In this example, we will use the curveBasis curve factory. html <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>d3.line.curve()</title> </head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> </script> <body> <h1 style="text-align: center; color: green;">GeeksforGeeks</h1> <center> <svg id="gfg" width="200" height="200"></svg> </center> <script> var points = [ {xpoint: 25, ypoint: 150}, {xpoint: 75, ypoint: 85}, {xpoint: 100, ypoint: 115}, {xpoint: 175, ypoint: 25}]; var Gen = d3.line() .x((p) => p.xpoint) .y((p) => p.ypoint) .curve(d3.curveBasis); d3.select("#gfg") .append("path") .attr("d", Gen(points)) .attr("fill", "none") .attr("stroke", "green"); </script> </body> </html> Output: Example 2: In this example, we will use the curveCardinal curve factory. html <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>d3.line.curve()</title> </head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> </script> <body> <h1 style="text-align: center; color: green;"> GeeksforGeeks </h1> <center> <svg id="gfg" width="200" height="200"> </svg> </center> <script> var points = [ {xpoint: 25, ypoint: 150}, {xpoint: 75, ypoint: 85}, {xpoint: 100, ypoint: 115}, {xpoint: 175, ypoint: 25}]; var Gen = d3.line() .x((p) => p.xpoint) .y((p) => p.ypoint) .curve(d3.curveCardinal); d3.select("#gfg") .append("path") .attr("d", Gen(points)) .attr("fill", "none") .attr("stroke", "green"); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article D3.js line.defined() method T taran910 Follow Improve Article Tags : JavaScript Web Technologies HTML D3.js Similar Reads d3-shape ArcsD3.js arc.centroid() FunctionThe arc.centroid() function is used to compute the midpoint of the centerline of the arc. The midpoint that is generated is calculated using (startAngle+endAngle)/2 and (innerRadius+outerRadius)/2. Syntax: arc.centroid(arguments); Parameters: This function accepts a single parameter as mentioned abo 1 min read D3.js arc.startAngle() FunctionThe arc.endAngle() function in d3.js library is used to set the start angle of the arc. This function sets the start angle to a function or to an integer. Syntax: arc.startAngle([angle]); Parameters: This function accepts a single parameter as mentioned above and described below. angle: This takes a 2 min read D3.js arc.innerRadius() FunctionThe arc.innerRadius function in d3.js is used to set the inner radius of the arc. It takes a number that defines the inner radius of the arc. Syntax: arc.innerRadius([radius]); Parameters: This function accepts a single parameter as mentioned above and described below. radius: This defines the size 2 min read D3.js arc.cornerRadius() FunctionThe arc.cornerRadius() function is used to set the corner radius for rounded corners. If the radius is not specified, returns the current corner radius accessor, which defaults to: function cornerRadius() { return 0; } Syntax: arc.cornerRadius([radius]); Parameters: This function accepts a single pa 2 min read D3.js arc.outerRadius() FunctionThe arc.outerRadius() function in d3.js library is used to set the outer radius of the produced arc. It takes a number that defines the outer radius of the arc. Syntax: arc.outerRadius([radius]); Parameters: This function accepts a single parameter as mentioned above and described below. radius: Thi 2 min read D3.js arc.padAngle() FunctionThe arc.padAngle() function in D3.js library is used to set the padding angle of the arc to the specified number. This function sets the angle between adjacent arcs for some padded arc. Syntax: arc.padAngle([angle]); Parameters: This function accepts a single parameter as mentioned above and describ 2 min read D3.js arc.endAngle() FunctionThe arc.endAngle() function of D3.js library is used to set the ending angle of the arc. This function sets the end angle to a function or to an integer. Syntax: arc.endAngle([angle]); Parameters: This function accepts a single parameter as mentioned above and described below. angle: This takes a nu 2 min read D3.js arc.padRadius() FunctionThe d3.padRadius() function is used to set the pad radius in the arc. If pad radius is provided then it sets the pad radius to the specified function or number and returns this arc generator. If radius is not provided then it returns the current pad radius accessor, which is by defaults to null, tha 2 min read D3.js Shapes Arcs API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Shapes Arcs: D3.js arc() FunctionD3.js arc.centroid() FunctionD3.js arc.innerRadius() Functio 1 min read d3-shape AreasD3.js area.curve() MethodThe d3.area.curve() method is used to give a curve to the area. D3.js provides several curve factories that can be used to give different curves. Syntax: d3.area.curve(curve_factory) Parameters: This function accepts a single parameter as mentioned above and described below. curve_factory: This para 2 min read D3.js area.defined() MethodThe d3.area.defined() method lets you specify whether there is data defined for a given data point or not. If this method returns false, this means that data point exists, else true. Syntax: d3.area.defined(data_point) Parameters: This function accepts a single parameter as mentioned above and descr 2 min read D3.js area.context() MethodThe d3.area.context() method lets you render the area in a canvas element’s context. The area will be rendered in the current context when the generator is invoked. We can set the context of our line on our own using this method like color, stroke, fill, etc. The default value is null. Syntax: d3.ar 2 min read D3.js area.x() methodThe d3.area.x() method is used to set the x accessor to the argument passed to it which may be either a number or a function that returns a number. Syntax: d3.area.x(x_point) Parameters: This function accepts a single parameter as mentioned above and described below. x_point: This parameter is a num 2 min read D3.js area.y0() methodThe d3.area.y0() method is used to set the y0 accessor to the argument passed to it which may be either a number or a function that returns a number, this is the first point or our lower bounds. Syntax: d3.area.y0(y0_point) Parameters: This function accepts a single parameter as mentioned above and 2 min read D3.js area.y1() methodThe d3.area.y1() method is used to set the y1 accessor to the argument passed to it which may be either a number or a function that returns a number, this is the second point or our upper bounds. Syntax: d3.area.y1(y1_point) Parameters: This function accepts a single parameter as mentioned above and 2 min read d3-shape CurvesD3.js curveBasis() methodThe basis curve interpolator produces cubic basis splines where the points provided to the generators are used as control points. There is a curve in the line based on the cubic splines. Syntax: d3.curveBasis() Parameters: This method takes no parameters Return Value: This method returns nothing. Ex 2 min read D3.js curveBasisClosed() MethodThe basis curve interpolator produces cubic basis splines where the points provided to the generators are used as control points. This is a closed variant which adds a curve between the first and last point in the dataset. Syntax: d3.curveBasisClosed() Parameters: This method does not accept any par 2 min read D3.js curveBasisOpen() MethodThe basis curve interpolator produces cubic basis splines where the points provided to the generators are used as control points. This is an open variant which omits the first and last point in the dataset. Syntax: d3.curveBasisOpen() Parameters: This method takes no parameters Return Value: This me 2 min read D3.js curveBundle() MethodThe curveBundle() method create straightened cubic basis splines. There is a curve in the line based on the cubic splines. Syntax: d3.curveBundle() Parameters: This method does not accept any parameters Return Value: This method does not return any value. Example 1: HTML <!DOCTYPE html> <ht 2 min read d3-shape LinesD3.js line.curve() methodThe d3.line.curve() method is used to give a curve to our line. D3.js provides several curve factories that can be used to give different curves. Syntax: d3.line.curve(curve_factory); Parameters: curve_factory: type of curve to be given to the line. Return Value: This method has no return value. Exa 2 min read D3.js line.defined() methodThe d3.line.defined() method lets you specify whether there is data defined for a given data point or not. If this method returns false, this means that data point exists, else true. Syntax: d3.line.defined(data_point); Parameters: data_point: data_point to be checked. Return Value: This method retu 2 min read D3.js line.x() methodThe d3.line.x() method sets or gets the x accessor point of the line. If x is provided, it must be a number or a function that returns a number. Syntax: d3.line.x(x-point); Parameters: x-point: This method takes an x-point that can be set from the points array. Return Value: This method returns the 2 min read D3.js line.y() FunctionThe line.y() function is used to set the y accessor to the function or to a number and then returns this to the line generator function invoked by d3.line() function. If y is not specified then it returns the current y accessor. Approach: In this example to create the line chart, first of all, creat 3 min read D3.js line.y() MethodThe line.y() method sets or returns the y accessor point of the line. If y is provided, it must be a number or a function that returns a number. Syntax: d3.line.y(); Parameters: y-point: This method takes a y-point that can be set from the points array. Return Value: This method returns the y access 2 min read D3.js line.context() methodThe d3.line.context() method lets you render the line in a canvas element’s context. The line will be rendered in the current context when the line generator is invoked. We can set the context of our line on our own using this method like color, stroke, fill, etc. The default value is null. Syntax: 2 min read D3.js Shapes Lines API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. The Lines API is used for spline or polyline as in a line chart. Shapes Lines: D3.js line() F 1 min read d3-shape LinksD3.js linkVertical() MethodThe d3.linkVertical() method returns a new link generator with vertical tangents. It is typically used when the root is on the left/right edge with the children going right/left. Syntax: var link = d3.linkVertical() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); Parameters: This fu 1 min read D3.js linkHorizontal() MethodThe d3.linkHorizontal() method returns a new link generator with Horizontal tangents. It is typically used when the root is on the top/bottom edge with the children going down/up. Syntax: var link = d3.linkHorizontal() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); Parameters: This 1 min read D3.js linkRadial() MethodThe d3.linkRadial() method returns a new link generator with radial tangents. It is typically used when the root is centered with the children spreading outwards from the root. Syntax: var link = d3.linkRadial() .angle(function(d) { return d.x; }) .radius(function(d) { return d.y; }); Parameters: Th 1 min read D3.js Shapes Links API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Shapes Links: D3.js linkVertical() FunctionD3.js linkHorizontal() FunctionD3.js link() Functi 1 min read d3-shape PiesD3.js pie() FunctionThe d3.pie() is used to construct a pie generator that has its default settings. This pie generator takes an array of data and then returns an array of objects that contains details about each arc angle. Syntax: d3.pie(); Parameters: This function does not accept any parameters. Return Values: This 2 min read D3.js pie.value() FunctionThe pie.value() function is used to set the value property of the data returned by the pie generator function. If the value is specified then it sets the value to the given dynamic or static function or the number. Syntax: pie.value([value]); Parameters: This function accepts a single parameter as m 3 min read D3.js pie.sort() FunctionThe pie.sort() function in D3.js is used to sort the data objects based on different properties of data. The comparator function can be used to define the basis on which the sorting would be done. Syntax: pie.sort( compare ) Parameters: This function accepts a single parameter as mentioned above and 4 min read D3.js pie.sortValues() FunctionThe pie.sortValues() function in D3,js is used to set the value comparator to the given function. It returns the current value comparator when the comparator function is not specified which defaults to the descending order. The difference between a value and data comparator is that the two arguments 4 min read D3.js pie.startAngle() FunctionThe pie.startAngle() function in D3.js is used to set the start angle of the pie. When an angle is specified, it sets the start angle to the given angle or function and returns a pie generator. When the angle is not specified, it returns the current start angle accessor, which defaults to no start a 3 min read D3.js pie.endAngle() FunctionThe pie.endAngle() function in D3.js is used to set the end angle of the pie. When an angle is specified, it sets the end angle to the given angle or function and returns a pie generator. When the angle is not specified, it returns the current end angle accessor, which defaults to no end angle. Synt 3 min read D3.js pie.padAngle() FunctionThe pie.padAngle() function in D3.js is used to set the padding angle between consecutive arcs. When an angle is specified, it sets the pad angle to the given angle or function and returns a pie generator. When the angle is not specified, it returns the current pad angle accessor, which defaults to 3 min read D3.js Shapes Pies API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Shapes Pies: D3.js pie() FunctionD3.js pie.value() FunctionD3.js pie.sort() FunctionD3.js pie 1 min read d3-shape StacksD3.js stack() methodThe d3.stack() method constructs a new stack generator with the default settings. This stack generator can be further used to create stacks. Syntax: d3.stack() Parameters: This method takes no parameters. Return Value: This method returns a new stack generator with the default settings. Example: htm 1 min read D3.js stack.keys() MethodThe stack.keys() method makes an array of strings as an argument and returns the stack generator. Syntax: stack.keys([keys]) Parameters: This method accepts a single parameter as mentioned above and described below. domain: This parameter holds an array of strings as key arguments. Return Value: Thi 1 min read D3.js stack.value() MethodThe stack.value() method takes a function that returns the value associated with a key. Syntax: stack.value([value_func]) Parameters: This function accepts a single parameter as mentioned above and described below: value_func: This is a function returning the value associated with the key. Return Va 1 min read D3.js stack.order() MethodThe stack.order() method takes an ordering function as an argument and returns the stack generator. Syntax: stack.order(orderingFunc) Parameters: This function accepts a single parameter as mentioned above and described below: orderingFunc: This is a function that orders the stack content. Return Va 2 min read D3.js stackOrderAppearance() MethodThe d3.stackOrderAppearance() method orders the series such that the series having the earliest maximum value (i.e. series with its maximum value at the lowest index) is positioned at the bottom of the stack, and the series that has the latest maximum is placed on the top. Syntax: d3.stackOrderAppea 1 min read D3.js stackOrderAscending() MethodThe d3.stackOrderAscending() method orders the series based on the ordering of the keys as defined by the stack.keys() method. The series with the smallest sum with be placed on the bottom, ascending upwards to the largest. Syntax: d3.stackOrderAscending(series) Parameters: This function accepts a s 1 min read D3.js stackOrderDescending() MethodThe d3.stackOrderDescending() method orders the series based on the ordering of the keys as defined by the stack.keys() method. The series with the largest sum with be placed on the bottom, ascending upwards to the smallest. Syntax: d3.stackOrderDescending(series) Parameters: This function accepts a 1 min read D3.js stackOrderInsideOut() MethodThe D3.js stackOrderInsideOut() method returns a series order such that the larger series (according to the sum of values) are on the inside and the smaller series are on the outside. Syntax: d3.stackOrderInsideOut(series); Parameters: This function accepts a single parameter as mentioned above and 1 min read D3.js stackOrderNone() MethodThe d3.stackOrderNone() method orders the series based on the ordering of the keys as defined by stack.keys() method. Syntax: d3.stackOrderNone(series) Parameters: This function accepts a single parameter as mentioned above and described below: series: This is the series based on the ordering of the 1 min read D3.js stackOrderReverse() MethodThe d3.stackOrderReverse() method orders the series based on the ordering of the keys as defined by stack.keys() method. Syntax: d3.stackOrderReverse(series) Parameters: This function accepts a single parameter as mentioned above and described below: series: This is the series based on the ordering 1 min read D3.js stackOffsetExpand() MethodThe D3.js stackOrderOffsetExpand() method applies a zero baseline and normalizes the values for each point such that the topline is always one. Syntax: d3.stackOrderOffsetExpand(series, order); Parameters: This function accepts two parameters as mentioned above and described below. series: This is t 1 min read D3.js Shapes Stacks API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Shapes Stacks: Description D3.js stack() FunctionThe d3.stack() method constructs a new stack 2 min read d3-shape SymbolsD3.js symbol() MethodThe d3.symbol() method constructs a new symbol generator with the default settings. Syntax: d3.symbol() Parameters: This function does not take any parameter. Return Value: This method returns a new symbol generator. Example: HTML <!DOCTYPE html> <html> <head> <meta charset= 1 min read D3.js symbol.type() MethodThe symbol.type() method takes a symbol type, sets the generators symbol that it will generate. The default symbol type, if not set, is d3.symbolCircle. Syntax: symbol.type([type]) Parameters: This function accepts a single parameter as mentioned above and described below: type: This is the type of 1 min read D3.js symbol.size() MethodThe symbol.size() method can be used to change the size of the symbol. Syntax: symbol.size([size]) Parameters: This function accepts a single parameter as mentioned above and described below: size: This is the size in square pixels or the area to be set. Return Value: This method has no return value 1 min read D3.js Symbol symbolCircle PropertyThe d3.symbolCircle is a symbol type in D3.js. It is a normal circle that can be used, It is also the default symbol type. Syntax: d3.symbolCircle Example 1: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.j 1 min read D3.js Symbols symbolCross PropertyThe d3.symbolCross property is a symbol type in D3.js. It is a cross-shaped symbol type that can be used. Syntax: d3.symbolCross Example 1: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> </s 1 min read D3.js Symbols symbolDiamond PropertyThe d3.symbolDiamond property is a symbol type in D3.js. It is a diamond-shaped symbol type that can be used. Syntax: d3.symbolDiamond Example 1: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> 1 min read D3.js Symbols symbolSquare PropertyThe d3.symbolSquare property is a symbol type in D3.js. It is a square-shaped symbol type that can be used. Syntax: d3.symbolSquare Example 1: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> 1 min read D3.js symbolStar symbolThe d3.symbolStar is a symbol type in D3.js. It is a star-shaped symbol type that can be used. Syntax: d3.symbolStar Example 1: html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> </script> 1 min read D3.js symbolTriangle symbolThe d3.symbolTriangle is a symbol type in D3.js. It is a square-shaped symbol type that can be used. Syntax: d3.symbolTriangle Example 1: html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> </scr 1 min read D3.js symbolWye symbolThe d3.symbolWye is a symbol type in D3.js. It is a square-shaped symbol type that can be used. Syntax: d3.symbolWye Example 1: html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://d3js.org/d3.v5.min.js"> </script> 1 min read D3.js Shapes Symbols API Complete ReferenceThe D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Shapes Symbols Description D3.js symbol() FunctionThe d3.symbol() method constructs a new sym 2 min read d3-shape Radial areasD3.js areaRadial() MethodThe d3.areaRadial() method in D3.js returns an area radial generator with the default settings for creating radial areas. A radial area generator uses angle and radius accessors for creating the area. Radial areas are always positioned relative to the origin. Syntax: d3.areaRadial() Parameters: This 2 min read D3.js areaRadial.curve() MethodThe areaRadial.curve() method in D3.js is used to specify the type of curve given to an area radial. D3.js provides several curve factories that can be used to get different types of curves. Syntax: areaRadial.curve( curve_factory ) Parameters: This method accepts a single parameter as mentioned abo 2 min read D3.js areaRadial.innerRadius() methodThe areaRadial.innerRadius() method is used to set or return the innerRadius accessor of the areaRadial. It can be a number or a function that returns a number representing the innerRadius of our areaRadial. Syntax: areaRadial.innerRadius(inner_Rad); Parameters: This method accepts single parameter 2 min read D3.js areaRadial.angle() MethodThe areaRadial.angle() method is used to set or gets the angle accessor. The angle must be a number or a function that returns a number representing an angle in radians. Syntax: areaRadial.angle(angle); Parameters: This method accepts single parameter as mentioned above and described below: angle: T 2 min read D3.js areaRadial.context() MethodThe areaRadial.context() method in D3.js lets you specify the canvas element’s context in which the area radial would be rendered. The area radial will be rendered in the current context when the generator is invoked. We can set the context of the area on our own using this method like color, stroke 3 min read D3.js areaRadial.outerRadius() MethodThe areaRadial.outerRadius() method is used to set or return the outerRadius accessor of the areaRadial. It can be a number or a function that returns a number representing the outerRadius of our areaRadial. Syntax: areaRadial.outerRadius(outer_Rad); Parameters: This method accepts single parameter 2 min read D3.js areaRadial.defined() MethodThe areaRadial.defined() method in D3.js lets one specify whether data is defined for a given data point or not. The value is checked for each point using the boolean value or function specified as a parameter to this method. The checked value is kept if this method returns true, otherwise it is omi 2 min read d3-shape Radial linesD3.js lineRadial() MethodThe d3.lineRadial() method is used to construct a new Radial line generator with the default settings. The Radial line generator is then used to make a Radial line. Syntax: d3.lineRadial(); Parameters: This method does not accept any parameters. Return Value: This method returns a Radial line Genera 2 min read D3.js lineRadial.radius() methodThe d3.lineRadial.radius() method is a radial line accessor method. It sets or gets the radius accessor. If the radius is provided, it must be a number or a function that returns a number representing the radius. Syntax: d3.lineRadial.radius(radius); Parameters: radius: This method takes the radius 2 min read D3.js lineRadial.curve() methodThe d3.lineRadial.curve() method is used to give a curve to our lineRadial. D3.js provides several curve factories that can be used to give different curves. Syntax: d3.lineRadial.curve(curve_factory); Parameters: curve_factory: type of curve to be given to the line. Return Value: This method has no 2 min read D3.js lineRadial.angle() MethodThe d3.lineRadial.angle() method is a radial line accessor method. It sets or returns the angle accessor. If the angle is provided, it must be a number or a function that returns a number representing an angle in radians. Syntax: d3.lineRadial.angle( angle ); Parameters: angle: This method takes an 3 min read D3.js lineRadial.context() methodThe d3.lineRadial.context() method lets you render the line in a canvas element’s context. The line will be rendered in the current context when the line generator is invoked. We can set the context of our line on our own using this method like color, stroke, fill, etc. The default value is null. Sy 2 min read D3.js lineRadial.defined() methodThe d3.lineRadial.defined() method lets you specify whether there is data defined for a given data point, angle, or not. If this method returns false, this means that data point exists, else true. Syntax: d3.lineRadial.defined(data_point); Parameters: data_point: data_point to be checked, it can be 2 min read D3.js linkRadial() MethodThe d3.linkRadial() method returns a new link generator with radial tangents. It is typically used when the root is centered with the children spreading outwards from the root. Syntax: var link = d3.linkRadial() .angle(function(d) { return d.x; }) .radius(function(d) { return d.y; }); Parameters: Th 1 min read Like