d3.js - D3：scale.domain 不是函数

Question

我完全是 D3.js 的新手，我遇到了一个问题，它返回了消息：“scale.domain 不是函数”。

我制作了一个组件来构建散点图图形。在它的代码中没有对指令“scale.domain”的任何调用。

这是代码：

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;

当我尝试访问包含此组件的网页时，控制台中出现此错误：

如果我部署错误行“TypeError: scale.domain is not a function”，我们可以看到代码第51行有引用。

如果我们检查代码，我们可以看到在 51 行中没有任何对“scale.domain”的引用

这怎么可能？我究竟做错了什么？

编辑我：

我已经修改了函数 setAxes，如下所示：

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};
}

但是现在，问题是我得到了错误“值未定义”，我不知道为什么会这样:(

标签： d3.js