The d3.axis.tickPadding() Function in D3.js is used to set the padding to the specified value in pixels and returns the axis.
Syntax:
axis.tickPadding([padding])
Parameters: This function accepts a single parameter as mentioned above and described below:
- padding: This parameter is size to set the padding.
Return Value: This function returns the axis.
Below programs illustrate the d3.axis.tickPadding() function in D3.js:
Example 1:
HTML
<!DOCTYPE html> <html>     <head>     <title>         D3.js | D3.axis.tickPadding() Function     </title>         <script type="text/javascript"     </script>         <style>         svg text {             fill: green;             font: 15px sans-serif;             text-anchor: middle;         }     </style> </head>     <body>     <script>         var width = 400, height = 400;         var svg = d3.select("body")             .append("svg")             .attr("width", width)             .attr("height", height);              var yscale = d3.scaleLinear()             .domain([0, 1])             .range([height - 50, 0]);              var y_axis = d3.axisRight()             .scale(yscale).tickPadding([-20]);              svg.append("g")             .attr("transform", "translate(100,20)")             .call(y_axis)      </script> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html>     <head>     <title>         D3.js | D3.axis.tickPadding() Function     </title>         <script type="text/javascript"     </script>         <style>         svg text {             fill: green;             font: 15px sans-serif;             text-anchor: middle;         }     </style> </head>     <body>     <script>         var width = 400, height = 400;         var svg = d3.select("body")             .append("svg")             .attr("width", width)             .attr("height", height);              var xscale = d3.scaleLinear()             .domain([0, 10])             .range([0, width - 60]);              var x_axis = d3.axisBottom()             .scale(xscale).tickPadding([40]).tickSizeInner([0]);              var xAxisTranslate = height / 2;              svg.append("g")             .attr("transform", "translate(50, "                 + xAxisTranslate + ")")             .call(x_axis)      </script> </body> </html> |
Output:
