Есть ли способ изменить стиль меток оси x / y диаграммы D3?

Question

Я пытаюсь встроить диаграмму D3 в приложение React. Ниже приведен код, который я использую для создания осей X и Y. Я хочу изменить стиль этикеток и нашел способ сделать это. Но мой метод не мог переопределить исходные метки, сформированные методом .domain () D3. Вместо этого теперь у меня есть 2 ярлыка: - 1. Исходный и 2. Один, преобразованный для наклона на 90 градусов (я хочу сохранить этот), а также хочу добавить больше стиля к этим ярлыкам.

Код компонента: -

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;