Data Visualization with D3 4.x Cookbook - Second Edition

Customizing ticks

We already saw how to use the ticks function in the previous recipe. This is the simplest ticks-related customization you can do on a D3 axis. In this recipe, we will cover some of the most common and useful ticks-related customizations with D3 axis.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/ticks.html

How to do it...

In the following code example, we will customize the ticks, padding, and formatting of its label. Let's take a look at the code snippet first:

<script type="text/javascript"> var height = 500, width = 500, margin = 25, axisWidth = width - 2 * margin; var svg = d3.select("body").append("svg") .attr("class", "axis") ...