Блог

Главная - Вопросы по программированию - Диаграмма областей с накоплением NVD3 выглядит странно

Диаграмма областей с накоплением NVD3 выглядит странно

#javascript #d3.js #nvd3.js

#javascript #d3.js #nvd3.js

Вопрос:

Я пытался использовать диаграмму областей с накоплением через NVD3 с некоторыми реальными данными, и это выглядит странно: Диаграмма областей с накоплением с использованием NVD3

Я предполагаю, что что-то не так с функцией доступа к данным или данным, но я не могу понять, что именно.

   var chart = nv.models.stackedAreaChart()
            .x(function(d) { if (typeof d !== "undefined" amp;amp; d !== null) return d[0] })
            .y(function(d) { if (typeof d !== "undefined" amp;amp; d !== null) return d[1] })
            .clipEdge(true)
            .useInteractiveGuideline(true)
            ;

Также я заметил, что она вообще не работает, если массив «значений» имеет разную длину для разных объектов данных. Это ограничение NVD3 или что-то в этом роде?

Моя скрипка

Комментарии:

1. Это потому, что ваши ряды имеют разные временные диапазоны. Для корректного отображения вы должны использовать тот же временной масштаб. Смотрите пример — other в этом примере используется масштаб. Разница в рядах вычисляется как разница между элементами с одинаковым индексом массива данных. Итак, думаю, именно поэтому длина ряда должна быть одинаковой.

2. Спасибо за ответ. Имеет смысл, но одинаковые требования к длине ряда и временному масштабу не всегда могут быть достигнуты с реальными данными. Кроме того, я заметил, что useInteractiveGuideline в вашем примере исчез, хотя для него установлено значение true, выдавая ошибку «Не удается прочитать свойство ‘0’ неопределенного».

3. просто преобразуйте данные, обновите .

4. Еще раз спасибо, отлично работает.

5. возьмите общую временную шкалу и диапазон, которые охватывают все ваши серии, а затем просто заполните недостающие значения (по оси y) 0 для всех серий. должно сработать!

Ответ №1:

Благодаря krispo проблема была решена. Для правильного отображения данных NVD3 требует, чтобы данные соответствовали следующим правилам:

  1. Ряды должны иметь одинаковый временной масштаб (диапазон).
  2. Длина ряда, т.Е. Длина массива значений, должна быть одинаковой для всех объектов в данных.

Чтобы удовлетворить 1-е требование, данные должны быть преобразованы следующим образом:

 data = data.map(function(series){
  series.values = series.values.map(function(d,i){
      return [data[2].values[i][0], d[1]]
  })
  return series;
});

Если данные имеют разную длину рядов (2-е требование), вам следует заполнить ряды отсутствующих значений нулями.

Рабочий пример здесь.

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

Комментарии:

1. @ovvn… Я пытаюсь сделать что-то подобное, но сталкиваюсь с той же проблемой, когда длина массива и временные ряды одинаковы. Формат моей структуры данных отличается от примера, но по какой-то причине я не смог заставить ее работать с вашим методом, я разветвил скрипку и разместил некоторые примеры данных здесь: jsfiddle.net/vy6637ne

Метки: