Javascript d3折线图，线未绘制

我试图模仿简单的方块示例，但是我似乎只画x轴和y轴，没有线的符号。我以不同的方式加载数据，通过数组而不是tsv文件，尽管我已经梳理了几次，我认为所有内容都以相同的方式输入到天平和测线中。非工作JSBin：

JS-Bin
var数据=[“2014-12-31”，0.31999999999]，“2014-11-30”，2.71]，“2014-10-31”，-4.05]，“2014-09-30”，4.22]，“2014-08-31”，2.17]，“2014-07-31”，5.36]，“2014-06-30”，3.99]，“2014-05-31”，3.52]，“2014-04-30”，-46]，“2014-03-31”，-8.22]，“2014-02-28”，5.89]]
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var parseTime=d3.timeParse（“%Y-%m-%d”）；
var x=d3.scaleTime（）.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）.rangeRound（[height，0]）；
var data=data.map（函数（d）{
返回[parseTime（d[0]），+d[1]]
});
var line=d3.line（）
.x（功能（d）{
返回d[0]；
})
.y（功能（d）{
返回d[1]；
});
x、 域（d3.extent（数据，函数（d）{返回d[0]；}））；
y、 域（d3.extent（数据，函数（d）{返回d[1]；}））；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.select（“.domain”）
.remove（）；
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，50）
.attr（“dy”，“0.9em”）
.attr（“文本锚定”、“结束”）
.text（“价格（$）”）；
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，3）
.attr（“d”，行）；

---

有没有明显的迹象表明我做错了

问题在于您没有缩放数据以使其适合svg坐标空间：

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

这部分代码设置数据的打印坐标，您当前正在使用数据值作为x和y svg值，无需任何缩放。您需要根据您的比例对其进行缩放：

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

这将允许您按预期绘制图形

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