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对象，而不是每个值绑定一个。

使用the example suggested above这是一个使用您的数据的小提琴：http://jsfiddle.net/henbox/2DQQc/3/

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

您的数据还使用了季度数字（Q1，Q2 ......），这些数据在解析日期时会有点棘手。我刚刚用月份名称替换了Q号码，但是如果你需要正确地做到这一点，请参阅https://gist.github.com/biovisualize/5430237/

简单的折线图

1 个答案: