D3.js curveBasisOpen() Method

Last Updated : 14 Sep, 2020

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= 
"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)) 
            // 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= 
"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.curveBasisOpen); 
  
        d3.select("#gfg") 
            .append("path") 
            .attr("d", Gen(points)) 
            .attr("fill", "none") 
            .attr("stroke", "green"); 
    </script> 
</body> 
  
</html> 