How to use the d3-scale/src/band function in d3-scale

render() {
    if (this.title) addLabels.title(this.svgEl, this.title, this.options.strokeColor);
    if (this.xLabel) addLabels.xLabel(this.svgEl, this.xLabel, this.options.strokeColor);
    if (this.yLabel) addLabels.yLabel(this.svgEl, this.yLabel, this.options.strokeColor);

    const tooltip = new Tooltip({
      parent: this.svgEl,
      title: 'tooltip',
      items: [{ color: 'red', text: 'weweyang: 12' }, { color: 'blue', text: 'timqian: 13' }],
      position: { x: 30, y: 30, type: config.positionType.upRight },
      unxkcdify: this.options.unxkcdify,
      backgroundColor: this.options.backgroundColor,
      strokeColor: this.options.strokeColor,
    });

    const xScale = scaleBand()
      .range([0, this.width])
      .domain(this.data.labels)
      .padding(0.4);

    const allCols = this.data.datasets
      .reduce((r, a) => a.data.map((b, i) => (r[i] || 0) + b), []);

    const yScale = scaleLinear()
      .domain([0, Math.max(...allCols)])
      .range([this.height, 0]);

    const graphPart = this.chart.append('g');

    // axis
    addAxis.xAxis(graphPart, {
      xScale,

render() {
    if (this.title) addLabels.title(this.svgEl, this.title, this.options.strokeColor);
    if (this.xLabel) addLabels.xLabel(this.svgEl, this.xLabel, this.options.strokeColor);
    if (this.yLabel) addLabels.yLabel(this.svgEl, this.yLabel, this.options.strokeColor);

    const tooltip = new Tooltip({
      parent: this.svgEl,
      title: 'tooltip',
      items: [{ color: 'red', text: 'weweyang: 12' }, { color: 'blue', text: 'timqian: 13' }],
      position: { x: 30, y: 30, type: config.positionType.upRight },
      unxkcdify: this.options.unxkcdify,
      backgroundColor: this.options.backgroundColor,
      strokeColor: this.options.strokeColor,
    });

    const xScale = scaleBand()
      .range([0, this.width])
      .domain(this.data.labels)
      .padding(0.4);

    const allData = this.data.datasets
      .reduce((pre, cur) => pre.concat(cur.data), []);

    const yScale = scaleLinear()
      .domain([0, Math.max(...allData)])
      .range([this.height, 0]);

    const graphPart = this.chart.append('g');

    // axis
    addAxis.xAxis(graphPart, {
      xScale,

if (!subjectsLoaded || !data || !data.length) {
      return null;
    }
    let fullData = data;

    data = data.filter(d => !excluding[d.groupId]);
    width = Math.min(width, data.length * 110 + 60);

    let dataValues = data.map(({ count }) => count);
    let displayValues = data.map(({ display }) => display);
    let chartHeight = height - margin.top - margin.bottom;
    let dataMax = max(dataValues);
    let dataScale = scaleLinear()
      .domain([0, dataMax])
      .range([0, chartHeight]);
    let scaleX = scaleBand()
      .domain(displayValues)
      .range([0, width])
      .paddingInner([0.1])
      .paddingOuter([0.3])
      .align([0.5]);
    let svgStyle = { display: "block", marginLeft: "auto", marginRight: "auto" }; //, marginLeft: 'auto', marginRight: 'auto'};

    let excludedCount = Object.keys(excluding).filter(k => excluding[k]).length;
    return (
      <div> {
          this.topRef(el);
          this.el = el;
        }}
      &gt;
        <div height="" style="{{"></div></div>

xScale() {
      return scaleBand()
        .range([0, this.nwidth])
        .domain(this.data.labels)
        .padding(0.4)
    },
    allData() {