Поле gradientLength и gradientThickness

В Vega и Vega-Lite градиентная заливка для линейных и площадных графиков реализуется через преобразование локальных координат графического примитива в пространство параметров градиента. При работе с stroke или fill градиентом система учитывает направление геометрии, её длину и толщину контура, формируя двумерную систему координат: вдоль пути и поперёк него.

Такой подход позволяет управлять тем, как цвет распределяется:

  • вдоль траектории линии (параметрическая ось),
  • поперёк линии (нормаль к траектории).

Именно для этих двух направлений используются параметры gradientLength и gradientThickness.

gradientLength

gradientLength определяет масштабирование градиента вдоль направления геометрии.

В терминах внутреннего рендеринга Vega это параметр, задающий длину проекции градиента на путь (path-aligned coordinate space). Он влияет на то, насколько быстро или медленно меняются цвета вдоль линии.

Ключевые свойства поведения:

  • увеличивает или уменьшает «растяжение» градиента вдоль кривой;
  • не изменяет геометрию линии, влияет только на интерпретацию цветового пространства;
  • при больших значениях создаёт плавные переходы на длинных сегментах;
  • при малых значениях приводит к частой смене цветов даже на коротких участках.

В линейных графиках gradientLength фактически нормализует расстояние вдоль пути:

L_{grad}

где увеличение gradientLength уменьшает плотность изменения цвета.

Важный эффект проявляется на кривых:

  • при высокой кривизне градиент может «сжиматься» в областях резких поворотов;
  • при низкой кривизне распределение становится равномернее, но более «резким».

gradientThickness

gradientThickness управляет распределением градиента поперёк линии, то есть по нормали к направлению движения.

Фактически это второй ортогональный масштаб в системе координат градиента.

Поведение параметра:

  • задаёт ширину области, на которую распространяется градиентный переход;
  • влияет на визуальную мягкость краёв линий и областей;
  • используется для контроля переходов между внутренней и внешней частью штриха;
  • особенно заметен при толстых линиях и area-марках.

Геометрически это можно представить как масштабирование нормальной оси:

T_{grad} strokeWidth gradientThickness

При увеличении значения:

  • градиент «растягивается» по толщине линии;
  • цветовые переходы становятся менее резкими в поперечном направлении;
  • уменьшается эффект «полосатости» при широких штрихах.

При уменьшении значения:

  • градиент концентрируется ближе к центральной оси;
  • края линии могут выглядеть более контрастными;
  • появляется эффект «подсветки» центра.

Взаимодействие gradientLength и gradientThickness

Оба параметра работают совместно, образуя двумерное пространство нормализации градиента:

  • gradientLength отвечает за ось вдоль пути;
  • gradientThickness отвечает за ось поперёк пути.

Их комбинация формирует матрицу преобразования координат градиента:

=

Это преобразование влияет на:

  • скорость смены цвета вдоль линии,
  • распределение цветового профиля по ширине штриха,
  • визуальную стабильность градиента при трансформациях масштаба.

Особенно важно учитывать это при:

  • анимациях масштаба графика,
  • изменении толщины линий в зависимости от данных,
  • построении area-графиков с высокой плотностью точек.

Применение в линейных графиках

В линейных графиках Vega градиент часто используется для отображения:

  • изменения значения во времени,
  • интенсивности сигнала,
  • плотности или вероятности.

При корректной настройке:

  • высокий gradientLength создаёт «медленную» цветовую динамику;
  • низкий gradientLength усиливает локальные изменения.

Поперечная стабилизация через gradientThickness позволяет избежать визуальных артефактов при увеличении stroke-width.

Применение в area-графиках

В площадных графиках градиент применяется к заполнению области, и поведение параметров становится более выраженным:

  • gradientLength влияет на вертикальные или горизонтальные переходы цвета вдоль оси времени или категории;
  • gradientThickness определяет плавность заполнения от линии графика к базовой оси.

При больших значениях gradientThickness область приобретает равномерный цветовой градиент без резких переходов у границ.

Особенности при масштабировании и трансформациях

При масштабировании сцены Vega оба параметра остаются в локальном пространстве координат и не зависят напрямую от transform матрицы SVG/Canvas.

Это приводит к следующим эффектам:

  • визуальная стабильность градиента при zoom/pan;
  • возможное искажение восприятия при сильной деформации осей;
  • необходимость компенсирующей нормализации в сложных интерактивных визуализациях.

Практическое поведение при высоких значениях

При экстремальных значениях параметров система начинает демонстрировать нелинейные эффекты:

  • слишком большой gradientLength приводит к почти монохромному штриху;
  • слишком малый gradientLength вызывает «шумовой» эффект;
  • чрезмерный gradientThickness размывает структуру линии;
  • чрезмерно малый gradientThickness делает градиент узким и концентрированным вдоль центра.

Эти эффекты связаны с дискретизацией пути и интерполяцией цвета вдоль сегментов кривой.

Оглавление