Working with basic axes

In this recipe, we will focus on introducing the basic concepts and supports of the Axis component in D3 while we cover different types and features of Axis as well as their SVG structures.

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/basic-axes.html

How to do it...

Let's first take a look at the following code sample:

<div class="control-group"> 
    <button onclick="renderAll(d3.axisBottom)"> 
        horizontal bottom 
    </button> 
    <button onclick="renderAll(d3.axisTop)"> 
        horizontal top 
    </button> 
    <button onclick="renderAll(d3.axisLeft)"> 
        vertical left 
    </button> 
    <button onclick="renderAll(d3.axisRight)"> 
        vertical right 
    </button> 
</div> 
 
<script type="text/javascript"> 
    var...