Javascript 简单折线图

我试图建立一个简单的折线图，但我遇到了一些问题

我正在加载的数据是一个

.tsv

文件，如下所示：

date    frequency
Q1 '07  1000
Q2 '07  900
Q3 '07  700
Q4 '07  500
Q1 '08  450
Q2 '08  430
Q3 '08  400

d3.tsv("./javascripts/data3.tsv", type, function(error, data) {
  svg.selectAll(".line")
     .data(data)
     .enter().append("path")
     .attr("class", "line")
     .attr("d", d3.svg.area());
});

<path class="line" d="M0,..." style="stroke: rgb(31, 119, 180);"></path>

我试图画出这样的图表：

date    frequency
Q1 '07  1000
Q2 '07  900
Q3 '07  700
Q4 '07  500
Q1 '08  450
Q2 '08  430
Q3 '08  400

d3.tsv("./javascripts/data3.tsv", type, function(error, data) {
  svg.selectAll(".line")
     .data(data)
     .enter().append("path")
     .attr("class", "line")
     .attr("d", d3.svg.area());
});

<path class="line" d="M0,..." style="stroke: rgb(31, 119, 180);"></path>

但不是像这样添加一行：

date    frequency
Q1 '07  1000
Q2 '07  900
Q3 '07  700
Q4 '07  500
Q1 '08  450
Q2 '08  430
Q3 '08  400

d3.tsv("./javascripts/data3.tsv", type, function(error, data) {
  svg.selectAll(".line")
     .data(data)
     .enter().append("path")
     .attr("class", "line")
     .attr("d", d3.svg.area());
});

<path class="line" d="M0,..." style="stroke: rgb(31, 119, 180);"></path>

我得到多条没有路径的线：

<g transform="translate(40,20)">
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
...

...

我做错了什么？

使用

数据（mydata）

而不是

数据（mydata）

将数据绑定到单个SVG对象，而不是每个值一个

使用这里有一个使用您的数据的小提琴：

我还修改了使用

d3.svg.area

路径生成器，而不是

d3.svg.line

（假设您选择它是出于某种原因）：

您的数据还使用季度数（Q1、Q2…），这将有点难以解析为日期。我刚刚用月份名称替换了Q数字，但是如果您需要正确地执行此操作，请参见

您看到了吗？