title: D3: scale.domain is not a function
body: <p>I'm totally newbie with D3.js and I've got a problem which returns me the message: "scale.domain is not a function".</p>
  
  <p>I have made a component to build a Scatter Plot Graphic. In it's code there is no any call to the instrucction "scale.domain". </p>
  
  <p>Here is the code:</p>
  
  <pre><code>import React, {Component} from "react";
  import {Determinator, MultiLang} from "react-multi-language";
  import * as d3 from "d3";
  
  
  class ScatterPlotGraphics extends Component{
   /**
    * Some of the props received are mandatory and others not. Between mandatory properties we've got:
    * idContainer: Name of the id container. This number must be unique for the web page where we draw the graphic
    * lang: language of presentation of text
    * data: Array of json objects with the information needed to build the graphic
    * total_points: Total points of a team which are needed to make some calculus
    * 
    * @param {*} props 
    */
      constructor(props){
          super();
          this.props = props;
          this.state = {
              loaded: true,
              margin: {
                  top: 20,
                  right: 20,
                  bottom: 30,
                  left: 40
              },
              width: 560,
              height: 360
          };
      }
  
      componentDidMount(){
          let canvas = this.setCanvas();
          let axis = this.setAxes();
          this.setAxesToCanvas(canvas, axis);
          this.setPointsToCanvas(canvas, this.state.data);
      }
  
      setAxes(){
          let xRange = [0, this.state.width];
          let yRange = [this.state.height, 0];
  
          let xAxis = d3.axisBottom(xRange).tickFormat(function(d) { return d.p2_p; });
          let yAxis = d3.axisLeft(yRange).tickFormat(function (d) { return d.p3_p; });
  
          return {"xAxis" : xAxis, "yAxis" : yAxis};
      }
  
      setAxesToCanvas(canvas, axis){
          //Add x-axis to the canvas
          canvas.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0, " + this.state.height + ")")   //move axis to the bottom of canvas
          .call(axis.xAxis)
          .append("text")
          .append("class", "label")
          .attr("x", this.state.width)
          .attr("y", -6)
          .style("text-anchor", "end")    //right-justify text
          .text("%2P");
  
          //Add y-axis to the canvas
          canvas.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("class", "label")
          .attr("tranform", "rotate(-90)")    //Although axis is rotated, text is not
          .attr("y", 15)
          .style("text-anchor", "end")
          .text("%3P");
      }
  
      setCanvas(){
          let margin = this.state.margin;
          // Add the visualization svg canvas to the container &lt;div&gt;
          let svg = d3.select("#scatterplot").style("background-color", "#091E36");
          svg.attr("height", this.state.height);
          svg.attr("width", this.state.width);
          svg.style("color", "#FFFFFF");
          svg.append("p").text("Hola, cómo estamos?");
  
          return svg;
          //return canvas;    
      }
  
      setPointsToCanvas(canvas, data){
          canvas.selectAll(".dot")
          .data(data)
          .enter().append("circle")
          .attr("class", "dot")
          .attr("r", 5.5)     //Radius size, could map to another dimension
          .attr("cx", function(d) { return xScale(d.p2_p); })  //x position
          .attr("cy", function(d) { return yScale(d.p3_p); })  //y position
          .style("fill", "green");
      }
  
      render(){
          return(
              &lt;div&gt;
                  {
                      (this.state.loaded) ?
                          &lt;div id="scatterplot"&gt;&lt;/div&gt;
                      :
                          &lt;h5&gt;
                              &lt;Determinator&gt;
                                  {{
                                      es: "Cargando datos ...",
                                      en: "Loading data ..."
                                  }}
                              &lt;/Determinator&gt;
                          &lt;/h5&gt; 
                  }
                  &lt;MultiLang lang = {this.props.lang} /&gt;
              &lt;/div&gt;
          );
      };
  };
  
  module.exports.ScatterPlotGraphics = ScatterPlotGraphics;
  </code></pre>
  
  <p>When I try to access to the webpage which contains this component I've got this error in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/M2Rms.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M2Rms.png" alt="enter image description here"></a></p>
  
  <p>If I deploy the error line "TypeError: scale.domain is not a function", we can see that there is a reference in line 51 of the code.</p>
  
  <p><a href="https://i.stack.imgur.com/cjJyj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cjJyj.png" alt="enter image description here"></a></p>
  
  <p>If we check the code, we can see that in 51 line there is no any reference to "scale.domain"</p>
  
  <p><a href="https://i.stack.imgur.com/BTrDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTrDr.png" alt="enter image description here"></a></p>
  
  <p>How is that possible? What am I doing wrong?</p>
  
  <p><strong>Edit I:</strong></p>
  
  <p>I have modified the function setAxes, being like this:</p>
  
  <pre><code>setAxes(data){
      let xRange = [0, this.state.width];
      let yRange = [this.state.height, 0];
  
      let xScale = d3.scaleLinear()
      .domain([ d3.min(data, function(d) { return d.p2_p; }) - 1,
                d3.max(data, function(d) { return d.p2_p; }) + 1 ])
      .range(xRange);
  
      let yScale = d3.scaleLinear()
      .domain([ d3.min(data, function(d) { return d.p3_p; }) - 1,
                d3.max(data, function(d) { return d.p3_p; }) + 1 ])
      .range(yRange); // flip order because y-axis origin is upper LEFT        
  
      let xAxis = d3.axisBottom(xScale).tickFormat(function(d) { return d.p2_p; });
      let yAxis = d3.axisLeft(yScale).tickFormat(function (d) { return d.p3_p; });
  
      return {"xAxis" : xAxis, "yAxis" : yAxis, "xScale" : xScale, "yScale" : yScale};
  }
  </code></pre>
  
  <p>But now, the problem is that I've got the error "values is undefined" and I don't know why that happend :(</p>