D3.js curveBundle() Method Last Updated : 09 Sep, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report The 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> <html> <meta charset="utf-8"> <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> </script> </head> <body> <h1 style="text-align:center; color:green;"> GeeksforGeeks </h1> <center> <svg id="gfg" width="200" height="200"></svg> </center> <script> var data = [ { x: 0, y: 0 }, { x: 1, y: 3 }, { x: 2, y: 15 }, { x: 5, y: 15 }, { x: 6, y: 1 }, { x: 7, y: 5 }, { x: 8, y: 1 }]; var xScale = d3.scaleLinear() .domain([0, 8]).range([25, 175]); var yScale = d3.scaleLinear() .domain([0, 20]).range([175, 25]); var line = d3.line() .x((d) => xScale(d.x)) .y((d) => yScale(d.y)) // curveBundle is used .curve(d3.curveBundle); d3.select("#gfg") .append("path") .attr("d", line(data)) .attr("fill", "none") .attr("stroke", "green"); </script> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"> </script> </head> <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 }, { xpoint: 200, ypoint: 150 }]; var Gen = d3.line() .x((p) => p.xpoint) .y((p) => p.ypoint) .curve(d3.curveBundle); 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 curveBundle.beta() Method T taran910 Follow Improve Article Tags : JavaScript Web Technologies HTML D3.js Similar Reads D3.js curveBasis() method The 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() Method The 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() Method The 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() Method The 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.js curveBundle.beta() Method The bundle curve interpolators create straightened cubic basis splines. The degree to which the spline is straightened is determined by the interpolator’s beta value. A Valid beta value range between 0 and 1. At the extremes, when the beta value is 1 the curve resembles the curve produced by d3.curv 2 min read D3.js curveCardinal() Method The curveCardinal() method produces a cubic cardinal spline. The curve is also based on these cubic cardinal splines. Syntax: d3.curveCardinal() Parameters: This method does not accept any parameters. Return Value: This method does not return any value. Example 1: HTML <!DOCTYPE html> <html 2 min read D3.js curveCardinalClosed() Method The d3.curveCardinalClosed() method produces a cubic cardinal spline. The curve is also based on these cubic cardinal splines. This is a closed variant which adds a curve between the first and last point in the dataset. Syntax: d3.curveCardinalClosed() Parameters: This method does not accept any par 2 min read D3.js curveCardinalOpen() Method The d3.curveCardinalOpen() method produces a cubic cardinal spline. The curve is also based on these cubic cardinal splines. This is an open variant which omits the first and last point in the dataset. Syntax: d3.curveCardinalOpen() Parameters: This method does not accept any parameters. Return Valu 2 min read D3.js curveCatmullRom() Method The d3.curveCatmullRom() interpolator produces a cubic CatMullRom spline. The curve is also based on these cubic CatMullRom splines. Syntax: d3.curveCatmullRom() Parameters: This method does not accept any parameters. Return Value: This method does not return any value. Example 1: HTML <!DOCTYPE 2 min read D3.js curveCatmullRomClosed() Method The d3.curveCatmullRomClosed() interpolator produces a cubic CatMullRom spline. The curve is also based on these cubic CatMullRom splines. This is an open variant which combines the first and last point in the dataset with a curve. Syntax: d3.curveCatmullRomClosed() Parameters: This method does not 2 min read Like