The d3.scaleLinear() method is used to create a visual scale point. This method is used to transform data values into visual variables.
Syntax:
d3.scaleLinear();
Parameters: This method takes no parameters.
Return Value: This method returns a Linear scale function.
Example 1: Plotting scale points.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>Line in D3.js</title> </head> <script src= </script> <body> <h1 style="text-align: center; color: green;"> neveropen </h1> <center> <svg width="700" height="40"> <g class="scal" transform="translate(40, 30)"> </g> </svg> </center> <script> var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ]; var ScaleGener = d3.scaleLinear() .domain([0, 10]) .range([0, 600]); d3.select('svg .scal') .selectAll('circle') .data(points) .enter() .append('circle') .attr('r', 3) .attr('fill', "green") .attr('cx', function(d) { return ScaleGener(d); }); </script> </body> </html> |
Output:
Example 2: Setting text for each point.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>Line in D3.js</title> </head> <script src= </script> <body> <h1 style="text-align: center; color: green;"> neveropen </h1> <center> <svg width="700" height="40"> <g class="scal" transform="translate(40, 30)"> </g> </svg> </center> <script> var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ]; var ScaleGener = d3.scaleLinear() .domain([0, 10]) .range([0, 600]); d3.select('svg .scal') .selectAll('circle') .data(points) .enter() .append('circle') .attr('r', 3) .attr('fill', "green") .attr('cx', function(d) { return ScaleGener(d); }); d3.select('svg .scal') .selectAll('text') .data(points) .enter() .append('text') .attr('x', function(d) { return ScaleGener(d); }) .attr('y', -10) .text(function(d) { return d; }); </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
