Мне нужно создать высокопроизводительные линейные диаграммы (10k + точки заговора), и я решил использовать подход рендеринга холста (сдвигать старые данные влево без повторного рендеринга) со смесью D3 для достижения этой цели. .
Я впервые работаю с таким персоналом (также я новичок в D3), и вот рабочий результат моей работы: Рабочий пример.
Я столкнулся с довольно большой проблемой, которая полностью блокирует меня, и без вашей помощи я, вероятно, потерплю неудачу. Нерабочий пример
Во втором примере вы можете заметить, что если дельта не равна, например, 1, 2, 3 пикселя, будет несоответствие между точками, отображаемыми D3, и линиями, нарисованными на холст. Если вы наведете указатель мыши на график, вы заметите точку, которая (через некоторое время) не будет соответствовать пересечению двух линий (извините, я не могу найти хорошее предложение для ее описания).
Основное различие между этими двумя примерами можно найти в методе dateFrom () в chart.component.ts . Первое решение использует функцию для вычисления dateFrom (начало графика). Я принимаю во внимание ширину холста и временной интервал. Благодаря этому я могу всегда перемещать старые данные на 1 пиксель влево. Моя цель - использовать пользовательский диапазон времени . Я не хочу ограничиваться dateFrom на основе ширины и интервала (я хотел бы показать данные за последнюю минуту / час / день). Я вижу, что D3 может как-то с этим справиться, но не могу понять, как (D3 отображает скрытый холст, ось X и помогает с позицией точки).
Logi c позади моего решения:
- Визуализация только новых данных на скрытом холсте с помощью D3,
- Смещение видимого содержимого холста (старые данные) влево (в рабочем примере всегда на 1 пиксель),
- Нарисуйте скрытый холст на видимом холсте,
- Повтор.
Я буду очень благодарен за любые советы и идеи о том, как решить эту проблему и улучшить мою идею.
Решение на основе: https://observablehq.com/@d3 / realtime-horizon-