在 d3 中解析日期时出错

Question

我正在尝试从 Javascript 数组中绘制折线图。在解析日期时我收到一个错误，上面写着

d3.v3.min.js:1 错误：属性 d：预期数字，“MNaN,0LNaN,450”.o @ d3.v3.min.js:1

我已经尝试过这个堆栈溢出问题中提到的建议：d3.js parsing date error with csv file。但我仍然面临同样的问题。知道我在这里做错了什么。当我尝试使用 tsv 输入运行时，同样有效。

这是我的代码：

    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
        var data = [
            {
                "date": "01-Jan-16",
                "close": "20"
                },
            {
                "date": "05-Jan-16",
                "close": "100"
                }
            ];



var formatDate = d3.time.format("%d-%b-%y");

        function type(d) {
            d.date = formatDate.parse(d.date);
            d.close = +d.close;
            return d;
        }

        var margin = {
                top: 20,
                right: 20,
                bottom: 30,
                left: 50
            },
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var x = d3.time.scale()
            .range([0, width]);

        var y = d3.scale.linear()
            .range([height, 0]);

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

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

        var line = d3.svg.line()
            .x(function (d) {
                return x(d.date);
            })
            .y(function (d) {
                return y(d.close);
            });

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


        x.domain(d3.extent(data, function (d) {
            return d.date;
            console.log(d.date);
        }));
        y.domain(d3.extent(data, function (d) {
            return d.close;
            console.log(d.close);
        }));

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");

        svg.append("path")
            .datum(data)
            .attr("class", "line")
            .attr("d", line);
    </script>

Answer 1

自己修复了代码。替换了

函数类型(d) { d.date = formatDate.parse(d.date); d.close = +d.close； 返回 d; }

由

    data.forEach(function (d) {
        d.date = formatDate.parse(d.date);
        d.close = +d.close;
        return d;
    });