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

时间:2013-10-01 12:34:07

标签: d3.js

为什么会出现此错误:

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);

1 个答案:

答案 0 :(得分:2)

您的代码存在两个小问题。首先,需要将比例范围指定为双元素数组,即代替

.range(0, width)

DO

.range([0, width])

其次,您需要将数据作为单元素数组传递(因为只有一行),即

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

完成jsfiddle here