Open In App

D3.js curveBundle.beta() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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.curveBasis, and when the beta is 0 the curve is a straight line between the first and last control points.

Syntax:

d3.curveBundle.beta(beta_value)

Parameters: 

  • beta_value: Beta value given for the curve ranging from [0,1]

Return Value: This method does not return any value.

Example 1: 

HTML




<!DOCTYPE html>
<html>
<meta charset="utf-8">
  
<head>
    <script src=
    </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))
            .curve(d3.curveBundle.beta(.25));
  
        var line1 = d3.line()
            .x((d) => xScale(d.x))
            .y((d) => yScale(d.y))
            .curve(d3.curveBundle.beta(.5));
  
        var line2 = d3.line()
            .x((d) => xScale(d.x))
            .y((d) => yScale(d.y))
            .curve(d3.curveBundle.beta(.75));
  
        var line3 = d3.line()
            .x((d) => xScale(d.x))
            .y((d) => yScale(d.y))
            .curve(d3.curveBundle.beta(1));
  
        d3.select("#gfg")
            .append("path")
            .attr("d", line(data))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", line1(data))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", line2(data))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", line3(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;">
        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.beta(.25));
  
        var Gen1 = d3.line()
            .x((p) => p.xpoint)
            .y((p) => p.ypoint)
            .curve(d3.curveBundle.beta(.5));
  
        var Gen2 = d3.line()
            .x((p) => p.xpoint)
            .y((p) => p.ypoint)
            .curve(d3.curveBundle.beta(.75));
  
        var Gen3 = d3.line()
            .x((p) => p.xpoint)
            .y((p) => p.ypoint)
            .curve(d3.curveBundle.beta(1));
  
        d3.select("#gfg")
            .append("path")
            .attr("d", Gen(points))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", Gen1(points))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", Gen2(points))
            .attr("fill", "none")
            .attr("stroke", "green");
  
        d3.select("#gfg")
            .append("path")
            .attr("d", Gen3(points))
            .attr("fill", "none")
            .attr("stroke", "green");
    </script>
</body>
  
</html>


Output:



Last Updated : 09 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads