title: D3: X Axis values wrong
body: <p>I'm new in d3.js and I've got a problem. I have made a component with React.js where I reuse in the same page. This component draws a scatter plot and the first time that I call this component show both axis correctly (the left one). But, the second time that I call it the x axis show wrong values but y axis show rigth values (the right one).</p>
  
  <p><a href="https://i.stack.imgur.com/lRyLo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lRyLo.png" alt="enter image description here"></a></p>
  
  <p>The value that I pass to the component for the graphic on the rigth are:</p>
  
  <pre><code>x: 5.56 y: 0.00
  x: 5.56 y: 33.33
  x: 44.44 y: 0.00
  x: 0.00 y: 0.00
  x: 22.22 y: 33.33
  x: 0.00 y: 0.00
  x: 0.00 y: 33.33
  x: 22.22 y: 0.00
  </code></pre>
  
  <p>How you can see, the x min value is 0.00 and the x max value is 44.44, but we've got in the x axis like min -1.0 and the highest is 5.5</p>
  
  <p>The code where I define the scales of the axis is:</p>
  
  <pre><code>setScales(data){ 
      let xRange = [this.state.margin.left, this.state.width - this.state.margin.right];
      let yRange = [this.state.margin.top, this.state.height - this.state.margin.top - this.state.margin.bottom]; // flip order because y-axis origin is upper LEFT  
  
      let xScale = d3.scaleLinear()
      .domain([ d3.min(data, function(d) { return d.value_x; }) - 1,
                d3.max(data, function(d) { return d.value_x; }) + 1 ])
      .range(xRange);
  
      let yScale = d3.scaleLinear()
      .domain([ d3.max(data, function(d) { return d.value_y; }) + 1,
                d3.min(data, function(d) { return d.value_y; }) - 1 ])
      .range(yRange);       
  
      return {"xScale" : xScale, "yScale" : yScale, "xRange" : xRange, "yRange" : yRange};
  } 
  </code></pre>
  
  <p>So, what am I doing wrong? What happend? </p>