javascript - 如何在 D3.js 中的 svg 上显示一条直线？

Question

我有一个难题。我在这里有一段代码，它是“多系列”画廊示例的稍微修改的示例（对不起，10 个代表，并且不能链接超过两次）并使用这个 .tsv 文件。期望是将当前在代码中绘制的数据（“流”列）与未绘制图形的数据（+Avgstream 和 -Avgstream）列放在同一个 SVG 上。但是，在我完成的每个 D3.js 项目中，我都无法在图表上画出直线。目前在此图中，仅绘制流列。这是我尝试一种简单的方法来表明流的结果在我正在使用的数据的运行平均值之内或之外。

关于为什么这些线不会绘制的任何想法？

Answer 1

你只是想策划所有三个系列吗？应该没有问题，除了您在 tsv 文件中的列名包含我不确定是否允许的“+”和“-”字符：

Unixtime        stream  +Avgstream      -Avgstream
1351805809      5594    5489    6379
1351865010      5468    5489    6379
1351868732      5479    5489    6379
1351875915      5504    5489    6379
1351883184      7177    5489    6379
1351890345      5481    5489    6379
...

我将您的列名（和 tsv 解码）替换为：

data = [
    {Unixtime:1351805809, stream: 5594, plusavg:5489, lessavg:6379},
    {Unixtime:1351865010, stream: 5468, plusavg:5489, lessavg:6379},
    {Unixtime:1351868732, stream: 5479, plusavg:5489, lessavg:6379},
    {Unixtime:1351875915, stream: 5504, plusavg:5489, lessavg:6379},
    {Unixtime:1351883184, stream: 7177, plusavg:5489, lessavg:6379}
];

我在图表中得到三行：

这就是你想要做的吗？见这里。