D3.js svg.axis() Function
The d3.svg.axis() Function in D3.js is used to create a new default axis. This function will construct a new axis on this axis, various operations can be performed.
Syntax:
d3.svg.axis()
Parameters: This function does not accept any parameter.
Return Value: This function returns the created an axis.
Below programs illustrate the d3.svg.axis() function in D3.js:
Example 1:
HTML
< html >
< head >
< title >
D3.js | d3.axisLeft() Function
</ title >
< script src = "//d3js.org/d3.v3.min.js" ></ script >
</ head >
< body >
< script >
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400);
// Create the Scale we will use
// for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([0, 300]);
// Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
// Create an SVG group Element for
// the Axis elements and call the
// xAxis function
svg.append("g")
.attr("transform", "translate(50, 50)")
.call(xAxis);
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
< html >
< head >
< title >
D3.js | d3.axisLeft() Function
</ title >
< script src = "//d3js.org/d3.v3.min.js" ></ script >
</ head >
< body >
< script >
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400);
// Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([300, 0]);
// Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
// Create an SVG group Element for the
// Axis elements and call the xAxis function
svg.append("g")
.attr("transform", "translate(50, 50)")
.call(xAxis);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
29 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...