d3.js - 解析d3折线图2d数据时出错

Question

为什么会出现此错误：

Error: Problem parsing d="MNaN,NaNLNaN,NaN" 

折线图：

var data = [ [5, 20], [80, 90], [250, 50], [100, 33], [330, 95],
            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ];

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.scale.linear()
                .domain(d3.extent(data, function(d) { return d[0]; }))
                .range(0, width);
var y = d3.scale.linear()
                .domain(d3.extent(data, function(d) { return d[1]; }))
                .range(0, height);

var line = d3.svg.line()
                .x(function(d) { return x(d[0]) })
                .y(function(d) { return y(d[1]) });

var svg = d3.select("body")
            .append("svg")
            .attr("height", height)
            .attr("width", width);

svg.append("path")
    .data(data)
    .attr("class", "line")
    .attr("d", line);

Answer 1

您的代码有两个小问题。首先，需要将刻度的范围指定为一个二元素数组，即，而不是

.range(0, width)

做

.range([0, width])

其次，您需要将数据作为单元素数组传递（因为只有一行），即

svg.append("path")
   .data([data])

在这里完成 jsfiddle 。