D3.js line.y() Function - GeeksforGeeks

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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Convert a string to an integer in JavaScript