Как отобразить прямую линию на svg в D3.js?

У меня есть загадка. У меня есть фрагмент кода здесь, который представляет собой слегка измененный пример примера галереи "multi-series" (извините, 10 повторений и не может ссылаться более двух раз) и использует этот файл .tsv. Ожидается, что данные, которые в настоящее время отображаются в коде (столбец «поток») в одном и том же SVG, с данными, которые не отображаются на графике (столбцы +Avgstream и -Avgstream). Однако в каждом проекте D3.js, который я делал, мне никогда не удавалось провести прямые линии на графике. На этом графике на данный момент только графики столбца потока. Это моя попытка простого способа показать, что результаты потока находятся внутри или за пределами скользящего среднего данных, которые я использую.

Любые идеи о том, почему эти строки не будут построены?


javascript charts d3.js visualization tsv
person jyaworski    schedule 06.12.2012    source источник
comment
Пожалуйста, избегайте размещения кода в другом месте и ссылки на него. Возьмите соответствующий код и включите его в свой пост. Большое количество людей проверит и поможет.   -  person Nicholas Pappas    schedule 07.12.2012
comment
Принято к сведению. В данном случае я не был уверен, где находится оскорбительный фрагмент.   -  person jyaworski    schedule 07.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вы просто пытаетесь построить сюжет всех трех серий? Проблем быть не должно, за исключением того, что кажется, что ваши имена столбцов в файле 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}
];

И я получаю три строки на графике:

введите здесь описание изображения

Это то, что вы пытаетесь сделать? См. здесь.

person Superboggly    schedule 06.12.2012
comment
Это сработало просто отлично! Мне нужно помнить, что нельзя использовать не буквенно-цифровые символы. Спасибо! - person jyaworski; 07.12.2012