javascript – Is there a way to change styling of D3 chart x/y axis labels?


I am trying to embed a D3 Chart into React app. Below is the code i am using to create X and Y axis. I want to change the styling of the labels and did find a way to do so. But my method couldn’t override the original labels formed by .domain() method of D3. Instead, now i have 2 labels:-
1. The original ones and
2. Ones transformed to tilt 90 degrees(I wanna keep these one) and also want to add more styling to these labels.

Attached image shows how is it looking right now.

Code for the component:-

import React, { Component } from 'react'
import * as d3 from 'd3';
import './App.css';

class D3Axis extends Component {
    constructor(props) {
        super(props)
        this.createBarChart = this.createBarChart.bind(this)
    }
    componentDidMount() {
        this.createBarChart()
    }

    createBarChart() {
        const data = (
            { "Month": "JAN", "quantity": 15, "quantity1": 8 },
            { "Month": "FEB", "quantity": 24, "quantity1": 15 },
            { "Month": "MARCH", "quantity": 3, "quantity1": 3 },
            { "Month": "APRIL", "quantity": 8, "quantity1": 5 },
            { "Month": "MAY", "quantity": 18, "quantity1": 20 })

        const yKeyName = "Month";
        const colors = ("#17a2b8", "lightblue", "blue");
        const margin = 200;


        var keys = Object.keys(data(0)).filter(d => d !== yKeyName);
        console.log("data and dataset in barchart=", data, keys);
        var svg = d3.select("svg");
        var width = svg.attr("width") - margin;
        var height = svg.attr("height") - margin;

        svg.append("text")
            .attr("transform", "translate(80,0)")
            .attr("x", 50)
            .attr("y", 50)
            .attr("font-size", "24px")
            .text("Stacked Bar Graph")

        const calculateTotal = (arr, d) => {
            let total = 0;
            arr.forEach(ele => total += d(ele));
            return total;
        }

        //1.)XSCALE
        var xScale = d3.scaleBand()
            .range((0, width))
            .padding(0.4)
            .domain(data.map(function (d) { return d(yKeyName); }));
        //2.)YSCALE
        var yScale = d3.scaleLinear()
            .range((height, 0))
            .domain((0, d3.max(data, function (d) {
                return (calculateTotal(keys, d) + 2);
            })))
        //3.)ZSCALE
        var zScale = d3.scaleOrdinal()
            .range(colors)
            .domain(keys);

            var xAxis = d3.axisBottom()
            .scale(xScale);
        var yAxis = d3.axisLeft()
            .scale(yScale);

        var g = svg.append("g")
            .attr("transform", "translate(100,100)");
             g.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale))
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)");

        var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

        g.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale))
            .append("text")
            .attr("y", height - 250)
            .attr("x", width - 150)
            .attr("text-anchor", "end")
            .attr("font-size", "12px")
            .attr("stroke", "black")
            .text("Leads");

        g.append("g")
            .call(d3.axisLeft(yScale))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "-5.1em")
            .attr("dx", "-5.1em")
            .attr("text-anchor", "end")
            .attr("stroke", "black")
            .text("Number of Leads in 1000")
            .attr("font-size", "12px")

    }
    render() { return <svg width="600" height="500"></svg> }
}
export default D3Axis;


  (1): https://i.stack.imgur.com/sfoL2.png