D3.js scaleLinear() method
Last Updated :
19 Aug, 2020
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;">
GeeksforGeeks
</ 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;">
GeeksforGeeks
</ 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...