title: How to make x axis labels work in d3 with react?
body: <p>here is an example of my code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {scaleOrdinal, axisBottom, select} from 'd3';
  
  export default class BarChart extends Component {
  
    constructor(props) {
      super(props)
      this.renderSvg = this.renderSvg.bind(this);
    }
  
    componentDidMount() {
      this.renderSvg();
    }
  
    renderSvg() {
      const margin = 20;
      const width = 400;
      const height = 800;
      const data = ["why", "aren't", "you", "working"]
        .map((title) =&gt; ({title}));
  
      // create scalar for x axis
      const x = scaleOrdinal()
        .domain(data.map(({title}) =&gt; title))
        .range([0, width]);
  
      const xAxis = axisBottom(x);
  
      // create svg and append graph
      const svg = select("svg")
        .attr("width", width)
        .attr("height", height + margin)
        .append("g")
  
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    }
  
    render() {
      const {width, height, className} = this.props;
      return &lt;div className="body"&gt;
        &lt;svg className="svg" /&gt;
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>I have followed the example at this site: <a href="https://bl.ocks.org/mbostock/3259783" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3259783</a> pretty closely as far as I can tell, but I can't get it to display the labels where they are expected to be at regular/even intervals. Any help would be appreciated, I'm new to using d3.</p>