D3.js axis.tickPadding() Function Last Updated : 13 Aug, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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" src="https://d3js.org/d3.v4.min.js"> </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" src="https://d3js.org/d3.v4.min.js"> </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: Comment More infoAdvertise with us Next Article D3.js axis.scale() Function S SHUBHAMSINGH10 Follow Improve Article Tags : JavaScript Web Technologies D3.js Similar Reads D3.js axis.tickFormat() Function The d3.axis.tickFormat() Function in D3.js is used to control which ticks are labeled. This function is used to implement your own tick format function.Syntax:axis.tickFormat([format])Parameters: This function accepts the following parameters.format: These parameters are format to set the tick forma 2 min read D3.js axis.tickValues() Function The d3.axis.tickValues() Function is used to generate ticks at specific values. This function returns the current tick values, which defaults to null.Syntax:axis.tickValues([values])Parameters: This function accepts the following parameters.values: This parameter is used for ticks rather than using 2 min read D3.js axisBottom() Function Axes can be drawn using built-in D3 functions. This is made of Lines, Ticks and Labels. The d3.axisBottom() function in D3.js is used to create a bottom horizontal axis. This function will construct a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 2 min read D3.js axis.ticks() Function The d3.axis.ticks() Function in D3.js is used to control which ticks are displayed by the axis. This function returns the axis generator Syntax: axis.ticks(arguments…) axis.ticks([count[, specifier]]) axis.ticks([interval[, specifier]]) Parameters: This function accepts the following parameters. cou 2 min read D3.js axis.tickSize() Function The d3.axis.tickSize() function in D3.js is used to set the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6. Syntax: axis.tickSize([size]) Parameters: This function accepts single parameter as m 2 min read D3.js axisLeft() Function Axes can be drawn using built-in D3 functions. It is made of Lines, Ticks and Labels. Axis API can be configured using the following script. <script src = "https://d3js.org/d3-axis.v1.min.js"></script> The d3.axisLeft() function in D3.js is used to create a left vertical axis. This funct 2 min read D3.js axis.tickSizeOuter() Function The d3.axis.tickSizeOuter() Function in D3.js is used to set the outer tick size to the specified value and returns the axis. The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Syntax: axis.tickSizeOuter([size]) Parameters: Thi 2 min read D3.js axis.tickPadding() Function 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 pa 2 min read D3.js axis.scale() Function The d3.axis.scale() Function in D3.js is used to sets the scale and return the axis. If this function is not provided with a specified scale, returns the current scale. Syntax: axis.scale([scale]) Parameters: This function accepts only a single parameter as mentioned above and described below: scale 2 min read D3.js axisRight() Function Axes can be drawn using built-in D3 functions. This is made of Lines, Ticks and Labels. The d3.axisRight() function in D3.js is used to create a vertical right-oriented axis. This function will construct a new right-oriented axis generator for the given scale, with empty tick arguments, a tick size 2 min read Like