title: React BarChart using D3 scrollable X-Axis
body: <p>I am currently trying my best to implement a bar chart that allows the user to scroll on the x-axis while the Y-Axis remains in place. I am using React as my framework.</p>
  
  <pre><code>export default [
    { activity: 'Main Idea and Detail', value: 90, color: '#2A78E4' },
    { activity: 'Character and Plot', value: 80, color: '#2A78E4' },
    { activity: 'Elements of Poetry', value: 70, color: '#2A78E4' },
    { activity: 'Standard 8.10', value: 60, color: '#2A78E4' },
    { activity: '8.1.3', value: 50, color: '#2A78E4' },
    { activity: 'Skill 6', value: 40, color: '#2A78E4' },
    { activity: 'Skill 7', value: 30, color: '#2A78E4' },
    { activity: 'Skill 8', value: 21, color: '#2A78E4' },
    { activity: 'Skill 9', value: 10, color: '#2A78E4' },
    { activity: 'Skill 10', value: 5, color: '#2A78E4' },
    { activity: '8.1.34', value: 50, color: '#2A78E4' },
    { activity: 'Skill 60', value: 40, color: '#2A78E4' },
    { activity: 'Skill 70', value: 30, color: '#2A78E4' },
    { activity: 'Skill 80', value: 21, color: '#2A78E4' },
    { activity: 'Skill 90', value: 10, color: '#2A78E4' },
    { activity: 'Skill 100', value: 5, color: '#2A78E4' },
    { activity: 'Skill 900', value: 100, color: '#2A78E4' },
    { activity: 'Skill 1000', value: 50, color: '#2A78E4' },
    { activity: 'Skill -1', value: 5, color: '#2A78E4' },
    { activity: '8.1.35', value: 50, color: '#2A78E4' },
    { activity: 'Skill 160', value: 40, color: '#2A78E4' },
    { activity: 'Skill 10', value: 30, color: '#2A78E4' },
    { activity: 'Skill 20', value: 21, color: '#2A78E4' },
    { activity: 'Skill 80', value: 10, color: '#2A78E4' },
    { activity: 'Skill 650', value: 5, color: '#2A78E4' },
    { activity: 'Skill 300', value: 100, color: '#2A78E4' },
    { activity: 'Skill 3000', value: 50, color: '#2A78E4' }
  ];
  </code></pre>
  
  <p>My code I am using to generate my scales are:</p>
  
  <pre><code>generateScales = () =&gt; {
      const { height, margin, width } = this.state;
      const xScales = d3
        .scaleBand()
        .domain(this.props.data.map(d =&gt; d.activity))
        .range([margin.left, width - margin.right])
        .padding(0.5);
  
      const yScales = d3
        .scaleLinear()
        .domain([0, 100])
        .range([height - margin.bottom, 0]);
      this.setState({
        xScales,
        yScales
      });
    };
  </code></pre>
  
  <p>To generate my scales I use the renderAxis function:</p>
  
  <pre><code>renderAxis = () =&gt; {
      const xAxisBottom = d3.axisBottom().scale(this.state.xScales);
      const axisLeft = d3.axisLeft().scale(this.state.yScales);
      d3.select(this.refs.xAxis).call(xAxisBottom);
      d3.select(this.refs.yAxis).call(axisLeft);
    };
  </code></pre>
  
  <p>I was trying to use this example as a clue, but I am unable to get this line to properly work "d3.behavior.drag().on("drag", display)" <a href="http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6" rel="noreferrer">http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6</a>.</p>
  
  <p>I receive an error that this is not part of the d3 module, but the example is clearly using it. I guess I do not know where to start or how to tackle this problem. I tried to solve it also by using CSS, but to no avail</p>
  
  <p>I was able to create a sandbox and if anybody could give me a clue on how to achieve a scrollable X-axis while having the Y-axis stay in place it will be really appreciated using React. Is the up above example the right place to be looking?</p>
  
  <p>I have tried to solve my issue by using the zoom feature it seems like it's the best solution. I am still running into problems when using d3.event.transform.rescaleX it seems that the rescaleX method does not appear on the d3.event.transform object. I am really frustrated as all the examples appear to be using this function. Any help will be greatly appreciated. </p>
  
  <p><a href="https://codesandbox.io/s/k0pj5m8q93" rel="noreferrer">https://codesandbox.io/s/k0pj5m8q93</a></p>