简单折线图

Question

我试图建立一个简单的折线图，但偶然发现了一些问题。

我正在加载的数据是一个.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>

我得到多行没有路径：

<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>
...

我究竟做错了什么？

Answer 1

使用datum(mydata)代替data(mydata)会将数据绑定到单个SVG对象，而不是每个值绑定一个。

使用上面建议的示例，这是一个使用您的数据的小提琴： http : //jsfiddle.net/henbox/2DQQc/3/

我还修改为使用d3.svg.area路径生成器，而不是d3.svg.line （假设您出于某种原因选择了它）：

您的数据还使用四分之一数字（Q1，Q2 ...），将其解析为日期会有些棘手。 我刚刚用月份名称替换了Q号，但是如果您需要正确执行操作，请参见https://gist.github.com/biovisualize/5430237/