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 method returns nothing.
Example 1:
HTML
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script src= </script> </head> <body> <h1 style="text-align:center; color:green;"> zambiatek </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)) // curveBasisOpen is used .curve(d3.curveBasisOpen); 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= </script> </head> <body> <h1 style="text-align:center; color:green;"> zambiatek </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.curveBasisOpen); d3.select("#gfg") .append("path") .attr("d", Gen(points)) .attr("fill", "none") .attr("stroke", "green"); </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
