错误：<circle>属性cx：预期长度，d3为“NaN”

Question

我正在尝试在d3中制作一个简单的散点图，但我无法使x刻度工作，但我能够让yScale正常工作。这是我的代码：

//Define the dataset to be used for this example
var dataset = [
                  [ 5,     20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [ 25,    67 ],
                  [ 85,    21 ],
                  [ 220,   88 ]
              ];

//Define the width and height of the SVG
var w = 500;
var h = 100;


//Add the empty svg element to the DOM
var svg = d3.select(".myDiv")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

//Create the scales for the scatterplot
var xScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) { 
                    return d[0]; 
                })])
                .range(0, w);

var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset, function(d) {
                    return d[1];
                })])
                .range([0, h]);



//Add the points to the scatter plot and size them accordingly
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return Math.sqrt(h - d[1]);
    });

//Add labels to the points to be able to see what the values are 
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d[0] + ", " + d[1];
    })
    .attr("x", function(d) {
        return xScale(d[1]);
    })
    .attr("y", function(d) {
        return yScale(d[1]);
    })
    .attr("fill", "red")
    .attr("font-size", "11px");

奇怪的是，y比例工作得很好，但是我看不出xScale和yScale之间的区别，它们会使一个工作而不是另一个工作。有什么想法吗？