The d3.axis.orient() Function in D3.js is used to set the orientation and returns the axis. If the orientation is not specified, returns the current orientation which defaults to "bottom".
Syntax:
axis.orient([orientation])
Parameters: This function accepts a single parameter as mentioned above and described below:
- orientation: This parameter is size to set the orientation of the axis. Four orientation is supported are: "top", "bottom". "left" and "right".
Return Value: This function returns the axis.
Below programs illustrate the d3.axis.orient() function in D3.js:
Example 1:
<html>
<head>
<title>
D3.js | d3.axis.orient() 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)
.orient("top");
// 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>
<head>
<title>
D3.js | d3.axis.orient() 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)
.orient("left");
// 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 3:
<html>
<head>
<title>
D3.js | d3.axis.orient() 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)
.orient("right");
// 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:
