Проблема передачи данных из C# в JavaScript для D3.js

Оффтоп javascript
1

Привет всем! У меня возникла проблема с использованием D3.js в моем проекте на ASP.NET. Я пытаюсь передать набор данных из C# в JavaScript через скрытое поле, но график не отображается.

Вот как выглядят мои данные:

[
  {"date":"2016.07.19","close":185697.89},
  {"date":"2016.07.20","close":185697.89},
  {"date":"2016.07.21","close":186601.1}
]

При попытке отрисовать график появляется ошибка:

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".

Кроме того, я хочу настроить ось Y так, чтобы она отображала годы, месяцы или конкретные даты в зависимости от контекста — например, Янв, Фев, Мар, или 2015, 2016, 2017, либо 2015-12-01, 2015-12-02 и так далее. Я новичок в D3.js, поэтому буду очень благодарен за любую помощь в решении этой проблемы. Как мне правильно передать и обработать данные, чтобы график отобразился корректно?

2

Кажется, у тебя проблема с форматом даты. d3.js ожидает даты в определенном формате, а твои выглядят немного нестандартно. попробуй преобразовать их в формат ‘YYYY-MM-DD’ перед передачей в JavaScript.

насчет оси Y - тут нужно использовать d3.timeFormat(). ты можешь задать разные форматы для разных временных промежутков. например:

var formatYear = d3.timeFormat(‘%Y’);
var formatMonth = d3.timeFormat(‘%b’);
var formatDate = d3.timeFormat(‘%Y-%m-%d’);

потом примени нужный формат в зависимости от диапазона дат.

не забудь также правильно распарсить JSON в JavaScript - JSON.parse(). удачи с графиком!

3

Попробуй применить d3.timeParse для преобразования дат из формата ‘YYYY.MM.DD’. Сначала парсь даты, затем используй d3.scaleTime с tickFormat для нужного формата. Это должно решить проблему с отображением. Что скажешь, готовы ли попробовать такое решение?

4

Проблема может быть связана с форматом данных. Используй JSON.stringify() при передаче из C# и JSON.parse() в JavaScript. Для работы с датами в D3 рекомендуется применять формат ISO 8601 (YYYY-MM-DD). Попробуй настроить ось с помощью d3.scaleTime() и d3.timeFormat(), как в примере ниже:

const yScale = d3.scaleTime()
  .domain(d3.extent(data, d => new Date(d.date)))
  .range([height, 0]);

Также обращай внимание на корректное преобразование строк в объект Date.