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=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</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:
