Заполните цвета градиента между точками на основе набора данных в качестве альтернативы тепловой карте - PullRequest
1 голос
/ 27 апреля 2020

У меня есть набор данных, которые я извлекаю из API, и я хочу визуализировать их в веб-приложении с цветным представлением. Мой первоначальный подход состоял в том, чтобы создать его с тепловой картой в vue. js, но я хочу, чтобы цвета интерполировались между различными значениями. Проблема с картой тепла в моем случае заключается в том, что она не заполняет пробелы между каждой точкой. Просто рисую круг.

По сути, я сказал, что у меня есть пять точек в разных местах на холсте, каждая из которых представляет цвет. Я хочу интерполировать цвет между каждой точкой и заполнить холст на основе цветовой точки.

У меня есть несколько разных идей сделать это;

  • три. js где, я думаю, я могу добиться этого с помощью шейдера, проникающего в каждую точку
  • возможно ли создать это с css?
  • D3. js?
  • или другая библиотека

Спасибо за ваш вклад

К сожалению, я не могу найти изображение для точной визуализации, но есть попытка (извините за плохое качество. только получил краски на этом компьютере)

Вот каждая точка, представленная белым кружком. Скажем, эта точка содержит цвет, между которым я хочу прыгнуть. Этот пример будет иметь семь цветов. по одному на каждый круг. Затем заливка интерполируется между каждой точкой. enter image description here

...