How to modify Y axis ticks from 45.000.000 to 45M on D3.js version 7?

Question

I've learned here https://github.com/d3/d3-format how to format numbers in d3 and here https://github.com/d3/d3-axis#axis_ticks how to modify d3 axis ticks in general.

I'd like to modify Y axis ticks from 45.000.000 to 45M. To do that I have to use:

axis.tickFormat(d3.format(".2s"));

I tried to put it everywhere around:

// AXIS Y
// add the y axis
svg.append("g")
    .call(d3.axisLeft(y))
    .selectAll("text");

But had no success. Where should I insert the tick modification on the code?

Here the entire code:

<script>
// set the dimensions and margins of the graph
var margin = {top: 32, right: 16, bottom: 32, left: 64},
    width  = 1024 - margin.left - margin.right,
    height = 512 - margin.top - margin.bottom;

// set the ranges
// cf. https://www.tutorialspoint.com/d3js/d3js_scales_api.htm
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.json("data.json").then(function(data) {
    // format the data
    data.forEach(function(d) {
        d.tt_votos = +d.tt_votos;
    });

    // scale the range of the data in the domains
    x.domain(data.map(function(d) { return d.nm_votavel; }));
    y.domain([0, d3.max(data, function(d) { return d.tt_votos; })]);

    // append the rectangles for the bar chart
    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.nm_votavel); })
        .attr("width", x.bandwidth())
        .attr("y", function(d) { return y(d.tt_votos); })
        .attr("height", function(d) { return height - y(d.tt_votos); });

    // AXIS X
    // add the x axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
         // Rotating text labels for a graph axis
         // cf. D3 Tips and Tricks v7.x (page 51)
         // https://github.com/d3/d3-axis#axis_ticks
        .selectAll("text")
            .style("text-anchor", "start")
            .attr("dx", "1em")
            .attr("dy", "-0.5em")
            .attr("transform", "rotate(-90)");

    // AXIS Y
    // add the y axis
    svg.append("g")
        .call(d3.axisLeft(y))
        .selectAll("text");

    // add text label for the y axis
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .style("font-family", "sans-serif")
        .style("font-size", "12px")
        .text("Votes (in Millions)");
});

</script>

Answer 1

Reading the documentation again I was able to answer my question.

The code may be written like that:

// AXIS Y
// add the y axis
svg.append("g")
    .call(d3
        .axisLeft(y)
        .tickFormat(d3.format(".2s"))
    )
    .selectAll("text");