Node.js 在D3中加载CSV数据时出现问题。svg.selectAll（…）.data（…）.enter不是函数

在你否决这个之前，我已经花了好几个小时试图让它生效

我试图通过将CSV数据集赋给一个变量将其加载到d3中，但似乎我一直收到一个错误，说enter（）不是函数。我认为问题在于我加载CSV数据的方式

作为参考，我将遵循本教程：

这是我的代码供参考。

var ratData = [];

d3.csv("rat-data.csv", function(d) {
    return {
        city : d.city, // city name
        rats : +d.rats // force value of rats to be number (+)
    };
}, function(error, rows) { // catch error if error, read rows
    ratData = rows; // set ratData equal to rows
    console.log(ratData);
    createVisualization(); // call function to create chart
});

function createVisualization(){
    // Width and height of SVG
    var w = 150;
    var h = 175;

    // Get length of dataset
    var arrayLength = ratData.length; // length of dataset
    var maxValue = d3.max(ratData, function(d) { return +d.rats;} ); // get maximum
    var x_axisLength = 100; // length of x-axis in our layout
    var y_axisLength = 100; // length of y-axis in our layout

    // Use a scale for the height of the visualization
    var yScale = d3.scaleLinear()
        .domain([0, maxValue])
        .range([0, y_axisLength]);

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

    // Select and generate rectangle elements
    svg.selectAll( "rect" )
        .data( ratData )
        .enter()
        .append("rect")
        .attr( "x", function(d,i){
            return i * (x_axisLength/arrayLength) + 30; // Set x coordinate of rectangle to index of data value (i) *25
        })
        .attr( "y", function(d){
            return h - yScale(d.rats); // Set y coordinate of rect using the y scale
        })
        .attr( "width", (x_axisLength/arrayLength) - 1)
        .attr( "height", function(d){
            return yScale(d.rats); // Set height of using the scale
        })
        .attr( "fill", "steelblue");

    // Create y-axis
    svg.append("line")
        .attr("x1", 30)
        .attr("y1", 75)
        .attr("x2", 30)
        .attr("y2", 175)
        .attr("stroke-width", 2)
        .attr("stroke", "black");

    // Create x-axis
    svg.append("line")
        .attr("x1", 30)
        .attr("y1", 175)
        .attr("x2", 130)
        .attr("y2", 175)
        .attr("stroke-width", 2)
        .attr("stroke", "black");

    // y-axis label
    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .text("No. of Rats")
        .attr("transform", "translate(20, 20) rotate(-90)")
        .attr("font-size", "14")
        .attr("font-family", "'Open Sans', sans-serif");
}; // end of function

我是D3新手，非常感谢大家的帮助。或者，如果有人能为我提供一个快速有效地学习D3的免费课程，请分享

---

非常感谢你

你用的是哪个版本的d3？嗨，安德鲁！非常感谢您的回复。我在node.js web应用程序中使用下载的d3.v5.min版本。可以在这里找到：您的示例使用d3v4:d3.json在d3v5中的行为不同，请参见此。通常，您看到的错误是没有数据传递到

.data（）

-这里的情况是

行

应该为空。如果您需要帮助使示例适应v5，我可以提供更多信息。非常感谢Andrew！不需要进一步的阐述。您的答复使我走上了调试的正确轨道。再次感谢！！！你用的是哪个版本的d3？嗨，安德鲁！非常感谢您的回复。我在node.js web应用程序中使用下载的d3.v5.min版本。可以在这里找到：您的示例使用d3v4:d3.json在d3v5中的行为不同，请参见此。通常，您看到的错误是没有数据传递到

.data（）

-这里的情况是

行

应该为空。如果您需要帮助使示例适应v5，我可以提供更多信息。非常感谢Andrew！不需要进一步的阐述。您的答复使我走上了调试的正确轨道。再次感谢！！！