Skip to content
Related Articles

Related Articles

D3.js line.y() Function

Improve Article
Save Article
Like Article
  • 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>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!