错误：属性y1中的<line>：期望长度为“ NaN”

Question

我正在尝试使用d3 v3显示一个箱线图，但是我遇到了上述错误以及其他类似的错误：

Error: <line> attribute y2: Expected length, "NaN".

Error: <rect> attribute y: Expected length, "NaN".

完整的错误消息如下：

错误：属性y：预期的长度为“ NaN”。[e-mail]:1（匿名）@d3.v3.min.js:3 [e-mail]:1 [e-mail]:3 [e-mail]:3（匿名）@box.js:103（匿名）@d3.v3.min.js:3 [e-mail]:1 [e-mail]:3 [e-mail]:19 [e-mail]:3（匿名）@subject:262（匿名）@d3.v3.min.js:1 [e-mail]:1 [e-mail]:1 load（异步）[e-mail]:1 [e-mail]:3（匿名）@subject:170

我从一个网站得到了这段js代码，所以我只是改变了他们提到的参数...图表的js代码如下所示：

var labels = true; // show the text labels beside individual boxplots?
var margin = {
    top: 30,
    right: 50,
    bottom: 70,
    left: 50
};
var width = 800 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var min = 1000,
    max = -1000;

// parse in the data    
d3.csv("../static/CSV/Chart_data/boxplot_year.csv?rnd='+(new Date).getTime()", function(error, csv) {
    // using an array of arrays with
    // data[n][2] 
    // where n = number of columns in the csv file 
    // data[i][0] = name of the ith column
    // data[i][1] = array of values of ith column

    var data = [];
    data[0] = [];
    data[1] = [];
    data[2] = [];
    data[3] = [];
    data[4] = [];
    data[5] = [];
    // add more rows if your csv file has more columns

    // add here the header of the csv file
    data[0][0] = "Y1";
    data[1][0] = "Y2";
    data[2][0] = "Y3";
    data[3][0] = "Y4";
    data[4][0] = "Y5";
    data[5][0] = "Y6";
    // add more rows if your csv file has more columns

    data[0][1] = [];
    data[1][1] = [];
    data[2][1] = [];
    data[3][1] = [];
    data[4][1] = [];
    data[5][1] = [];

    csv.forEach(function(x) {
        var v1 = Math.floor(x.Y1),
            v2 = Math.floor(x.Y2),
            v3 = Math.floor(x.Y3),
            v4 = Math.floor(x.Y4),
            v5 = Math.floor(x.Y5),
            v6 = Math.floor(x.Y6);
        // add more variables if your csv file has more columns

        var rowMax = Math.max(Math.max(v1, v2), Math.max(Math.max(v3, v4), Math.max(v5, v6)));
        var rowMin = Math.min(Math.min(v1, v2), Math.min(Math.min(v3, v4), Math.min(v5, v6)));

        data[0][1].push(v1);
        data[1][1].push(v2);
        data[2][1].push(v3);
        data[3][1].push(v4);
        data[4][1].push(v5);
        data[5][1].push(v6);
        // add more rows if your csv file has more columns

        if (rowMax > max) max = rowMax;
        if (rowMin < min) min = rowMin;
    });

    var chart = d3.box()
        .whiskers(iqr(1.5))
        .height(height)
        .domain([min, max])
        .showLabels(labels);

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("class", "box")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // the x-axis
    var x = d3.scale.ordinal()
        .domain(data.map(function(d) {
            console.log(d);
            return d[0];
        }))
        .rangeRoundBands([0, width], 0.7, 0.3);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    // the y-axis
    var y = d3.scale.linear()
        .domain([min, max])
        .range([height + margin.top, 0 + margin.top]);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    // draw the boxplots    
    svg.selectAll(".box")
        .data(data)
        .enter().append("g")
        .attr("transform", function(d) {
            return "translate(" + x(d[0]) + "," + margin.top + ")";
        })
        .call(chart.width(x.rangeBand()));


    // add a title
    svg.append("text")
        .attr("x", (width / 2))
        .attr("y", 0 + (margin.top / 2))
        .attr("text-anchor", "middle")
        .style("font-size", "18px")
        //.style("text-decoration", "underline")  
        .text("Grade through the years");

    // draw y axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("Grade") // and text1
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .style("font-size", "16px")
        .text("Revenue in €");

    // draw x axis  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height + margin.top + 10) + ")")
        .call(xAxis)
        .append("Year") // text label for the x axis
        .attr("x", (width / 2))
        .attr("y", 10)
        .attr("dy", ".71em")
        .style("text-anchor", "middle")
        .style("font-size", "16px")
        .text("Quarter");
});

// Returns a function to compute the interquartile range.
function iqr(k) {
    return function(d, i) {
        var q1 = d.quartiles[0],
            q3 = d.quartiles[2],
            iqr = (q3 - q1) * k,
            i = -1,
            j = d.length;
        while (d[++i] < q1 - iqr);
        while (d[--j] > q3 + iqr);
        return [i, j];
    };
}

我的csv文件如下：

Y1,Y2,Y3,Y4,Y5,Y6

3.8,5.7,0.0,6.8,8.2,6.8

5.0,1.5,5.0,0.0,6.1,9.0

4.0,5.6,5.5,4.1,5.5,5.1

5.4,6.7,5.1,5.0,9.0,6.8

5.5,5.3,8.0,8.6,6.1,7.7

8.0,1.7,4.6,6.1,7.6,5.9

6.3,7.3,6.8,8.3,6.0,0.0

5.0,5.1,6.6,7.8,5.4,3.5

5.6,3.7,7.0,5.1,7.1,2.7

8.5,6.0,1.8,7.7,2.5,8.0

6.4,9.8,5.8,7.0,6.8,8.7

6.7,7.5,5.0,6.3,0.0,7.4

有什么想法吗？提前感谢您！

- MTT

---

Math.floor(x,2010)，为什么是2010？ - epascarello

这是列的名称，它错了吗？@epascarello - MTT

@MTT Math.floor(x) 只需要一个参数。2010 年根本没有被使用。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor - Andrew Lohr

检查一下 min 和 max，也许当 d3 尝试计算长度时它们仍然是无穷大。也许不要使用无穷大和负无穷大来避免这个问题。 - Andrew Lohr

谢谢两位，但我已经更改了Math.floor、min max，但仍然无法工作！（请参见上面的更改）@AndrewLohr - MTT

Answer 1

问题似乎出现在将数据传递给箱线图的过程中：

// draw the boxplots    
svg.selectAll(".box")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) {
        return "translate(" + x(d[0]) + "," + margin.top + ")";
    })
    .call(chart.width(x.rangeBand()));

你的data数组是由2元素子数组组成的数组，每个子数组包含一个列标签和一个进一步的子数组数据列。例如，data[2][0]是"Y3"，但data[2][1]是对应于年份Y3的数据（[0, 5, 5, 5, 8, ... ]）。

D3会因此而混淆：它试图将2元素数组中的两个值都转换为数字，当然将列子数组转换为单个数字会失败，并最终得到NaN。

相反，你需要将仅包含列子数组的数组传递给.data()。然后，在transform属性中，将相应的标签传递到x函数中。在transform中调用的函数会传递索引以及数据列：我们使用这个索引来获取相应的标签。

因此，请尝试使用以下行替换上面的行：

// draw the boxplots    
svg.selectAll(".box")
    .data(data.map(function (d) { return d[1]; }))
    .enter().append("g")
    .attr("transform", function(d, i) {
        return "translate(" + x(data[i][0]) + "," + margin.top + ")";
    })
    .call(chart.width(x.rangeBand()));

- Luke Woodward