Ось X и многострочный график не отображаются в d3. js

Question

Я новичок в d3. js. Я пытаюсь изменить этот код многострочного графика в соответствии с моими данными. По моим данным, все замены мы сделали хорошо.

Ось Y и colorColumn были успешно заменены. Но ось X, которая была «отметкой времени» типа дата (дни недели), которую необходимо заменить на «Подкатегорию», которая имеет тип строки. Для этой замены я заменил этот код

const xScale = scaleTime()
    .domain(extent(data,xValue))
    .range([0,innerWidth])
    .nice();   //previous

на этот код:

 const xScale = scaleLinear().domain(extent(data,xValue)).range([0,innerWidth]);

Вот полный файл кода

 import {
  select,
  csv,
  scaleLinear,
  scaleTime,
  scaleOrdinal,
  extent,
  axisLeft,
  axisBottom,
  line,
  curveBasis,
  nest,
  schemeCategory10,
  timeFormat,
  descending
} from 'd3';

import { colorLegend } from './colorLegend';
const svg = select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => {
  const title='Profit Comparison by Segment by Region'
 // Region,Sub_Category,Profit
  const xValue = d => d.Sub_Category;
  const xAxisLabel="Sub-Category"

  const yValue = d => d.Profit;
  const circleRadius = 6;
  const yAxisLabel="Profit"

  const colorValue = d => d.Region;

  const margin = { top: 60, right: 160, bottom: 88, left: 105 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const xScale = scaleLinear()
    .domain(extent(data, xValue))
    .range([0, innerWidth])
    .nice();

  const yScale = scaleLinear()
    .domain(extent(data, yValue))
    .range([innerHeight, 0])
    .nice();

  const colorScale = scaleOrdinal(schemeCategory10);

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  const xAxis = axisBottom(xScale)
    .tickSize(-innerHeight)
    .tickPadding(15);

  const yAxis = axisLeft(yScale)
    .tickSize(-innerWidth)
    .tickPadding(10);

  const yAxisG = g.append('g').call(yAxis);
  yAxisG.selectAll('.domain').remove();

  yAxisG.append('text')
      .attr('class', 'axis-label')
      .attr('y', -60)
      .attr('x', -innerHeight / 2)
      .attr('fill', 'black')
      .attr('transform', `rotate(-90)`)
      .attr('text-anchor', 'middle')
      .text(yAxisLabel);

  const xAxisG = g.append('g').call(xAxis)
    .attr('transform', `translate(0,${innerHeight})`);

  xAxisG.select('.domain').remove();

  xAxisG.append('text')
      .attr('class', 'axis-label')
      .attr('y', 80)
      .attr('x', innerWidth / 2)
      .attr('fill', 'black')
      .text(xAxisLabel);

  const lineGenerator = line()
    .x(d => xScale(xValue(d)))
    .y(d => yScale(yValue(d)))
    .curve(curveBasis);

  const lastYValue = d =>
    yValue(d.values[d.values.length - 1]);

  const nested = nest()
    .key(colorValue)
    .entries(data)
    .sort((a, b) =>
      descending(lastYValue(a), lastYValue(b))
    );

  console.log(nested);

  colorScale.domain(nested.map(d => d.key));

  g.selectAll('.line-path').data(nested)
    .enter().append('path')
      .attr('class', 'line-path')
      .attr('d', d => lineGenerator(d.values))
      .attr('stroke', d => colorScale(d.key));

  g.append('text')
      .attr('class', 'title')
      .attr('y', -10)
      .text(title);

  svg.append('g')
    .attr('transform', `translate(820,121)`)
    .call(colorLegend, {
      colorScale,
      circleRadius: 10,
      spacing: 38,
      textOffset: 20
    });
};


csv('data4.csv')
  .then(data => {
    data.forEach(d => {
        d.nbre = +d.nbre;
      d.num_mois = +d.num_mois;

    });
    render(data);
  });

Но он не отображается ось абсцисс и график. Как я могу исправить этот код, чтобы нарисовать и ось X, и график. Вот ссылка на код на vizhub .