D3: scale.domain is not a function - d3.js

Question

I'm totally newbie with D3.js and I've got a problem which returns me the message: "scale.domain is not a function".
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".
Here is the 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 <div>
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(
<div>
{
(this.state.loaded) ?
<div id="scatterplot"></div>
:
<h5>
<Determinator>
{{
es: "Cargando datos ...",
en: "Loading data ..."
}}
</Determinator>
</h5>
}
<MultiLang lang = {this.props.lang} />
</div>
);
};
};
module.exports.ScatterPlotGraphics = ScatterPlotGraphics;
When I try to access to the webpage which contains this component I've got this error in the console:
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.
If we check the code, we can see that in 51 line there is no any reference to "scale.domain"
How is that possible? What am I doing wrong?
Edit I:
I have modified the function setAxes, being like this:
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};
}
But now, the problem is that I've got the error "values is undefined" and I don't know why that happend :(