D3.js line.y() Function

Last Updated : 09 Sep, 2020

The 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, create the SVG element and set its width and height as in the below example. Then create a CSV file, the data of the file is given in the example. We append the group container to the SVG. After this create a line generator function using d3.line() function.

After creating the line generator function set the x-scale and y-scale domain and range and append the scale to the SVG. Then give the x-scale data and y-scale data using line.x() and line.y() to the x-axis and y-axis. After this append the path to SVG and give the data from the line generator function to the “d” attribute of the path container. Give some style to the line chart and its done.

Syntax:

line.y([y]);

Parameters: This function accepts a single parameter as mentioned above and described below.

y: This parameter is used to set the y-accessor.

Return Values: This function does not return anything.

Below given are a few examples of the function given above.

Example:

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <meta
            property="viewport"
            content="width=device-width,  
                    initial-scale=1.0"/>  
        <title>GeeksforGeeks</title>  
        <!--Fetching from CDN of D3.js -->
        <script src=  
        "https://d3js.org/d3.v4.min.js">  
        </script> 
    </head> 
    <body>  
        <div style="width:300px; height:300px;"> 
            <center> 
                <h1 style="color:green"> 
                    GeeksforGeeks 
                </h1>  
                <h2> 
                    line.y(); 
                </h2>  
            </center> 
            <svg width="300" height="300"> 
            </svg> 
        </div> 
        <script> 
        // Selecting SVG and appending group tag 
        var svg = d3.select("svg") 
          .append("g") 
            .attr("transform", 
                  "translate(80, -80)"); 
        // Data for the CSV file 
            // year, population 
            // 110, 20 
            // 130, 25 
            // 135, 20 
            // 140, 25 
            // 180, 20 
  
        // Fetching data from CSV file 
        d3.csv("data.csv", 
          (data)=>{ 
            // Setting domain and range of x-scale  
            var x = d3.scaleLinear() 
              .domain([100, 200]) 
              .range([ 0, 200]); 
  
            // Appending x-axis 
            svg.append("g") 
              .attr("transform", "translate(0, 300)") 
              .call(d3.axisBottom(x)); 
              svg.append("text")              
                .attr("transform", "translate(100, 340)") 
                .text("Year"); 
          
            // Setting domain and range of y-scale 
            var y = d3.scaleLinear() 
              .domain([0, 100]) 
              .range([ 200, 0 ]); 
  
            // Appending y-axis 
            svg.append("g") 
              .attr("transform", "translate(0, 100)") 
              .call(d3.axisLeft(y)); 
  
            svg.append("text")              
            .attr("transform", "rotate(-90)") 
            .attr("y", -50) 
            .attr("x", -250) 
            .attr("dy", "1em") 
            .text("Population"); 
                  
          
            // Constructing line generator 
            var line=d3.line(); 
            line.x(function(d) { return x(+d.year) }); 
  
            // Using line.x() Function 
            line.y(function(d) { return y(+d.population) }); 
  
            // Appending the path i.e the line 
            svg.append("path") 
              .datum(data) 
              .attr("stroke", "green") 
              .attr("stroke-width", "2") 
              .attr("fill", "none") 
              .attr("d", line) 
              .attr("transform", "translate(0, 80)"); 
        }); 
        </script>  
    </body>  
</html> 