Линия

{
  "data": ... ,
  "mark": "line",
  "encoding": ... ,
  ...
}

Примитив line соединяет последовательность записей данных. Линии часто показывают траекторию или изменение во времени. В отличие от большинства примитивов, одна линия представляет сразу несколько записей — как area и trail.

Чтобы соединить отдельными отрезками пары позиций (x, y) и (x2, y2), используйте rule. Для непрерывной линии с меняющейся толщиной подходит trail.

Содержание страницы

Свойства линии

// Спецификация одиночного представления
{
  ...,
  "mark": {
    "type": "line",
    ...
  },
  "encoding": ... ,
  ...
}

Определение линии может содержать любые стандартные свойства примитивов, а также следующие свойства интерполяции и наложения точек:

Свойство Тип Описание
orient Orientation Ориентация столбчатых диаграмм без укладки, штрихов, областей и линий: "horizontal" (по умолчанию) или "vertical".

• Для bar, rule и tick определяет, применяется ли размер столбца или штриха к измерению X или Y.
• Для area определяет свойство orient выходной спецификации Vega.
• Для line и trail определяет порядок сортировки точек линии, если не задано config.sortLineBy.

Для диаграмм с укладкой ориентация всегда определяется направлением укладки; явно заданное значение игнорируется.
interpolate Interpolate, ExprRef Метод интерполяции для линий и областей:
• "linear" — последовательность прямых отрезков, как у ломаной.
• "linear-closed" — замыкает прямые отрезки в многоугольник.
• "step" — чередует горизонтальные и вертикальные отрезки, как ступенчатая функция.
• "step-before" — чередует вертикальные и горизонтальные отрезки.
• "step-after" — чередует горизонтальные и вертикальные отрезки.
• "basis" — B-сплайн с дублированием контрольных точек на концах.
• "basis-open" — открытый B-сплайн; может не проходить через начальную и конечную точки.
• "basis-closed" — замкнутый B-сплайн, образующий петлю.
• "cardinal" — кардинальный сплайн с дублированием контрольных точек на концах.
• "cardinal-open" — открытый кардинальный сплайн; может не проходить через начальную и конечную точки, но проходит через остальные контрольные точки.
• "cardinal-closed" — замкнутый кардинальный сплайн, образующий петлю.
• "bundle" — аналог basis, но параметр натяжения используется для выпрямления сплайна.
• "monotone" — кубическая интерполяция, сохраняющая монотонность по Y.
tension number, ExprRef Параметр натяжения для линий и областей; его действие зависит от метода интерполяции.
point boolean, OverlayMarkDef, "transparent" Флаг наложения точек поверх линии или области либо объект свойств этих точек.

• "transparent" — прозрачные точки для улучшения работы подсказок и выделения.
• Пустой объект {} или true — точки с заливкой и стандартными свойствами.
• false — точки не добавляются автоматически.

По умолчанию: false.

Примеры

Простой линейный график

Временное или порядковое поле на оси x и количественное поле на оси y создают одну линию:

Чтобы получить несколько линий, можно сгруппировать записи по другому признаку, например через цвет или канал detail.

Несколько цветных рядов

Добавление поля в канал свойств примитива, например color, группирует точки в отдельные ряды и создаёт линейный график с несколькими цветными линиями:

Вместо легенды можно подписать линии текстом. Здесь для определения конечной точки используется агрегат argmax; одна линия скрыта, чтобы подписи не столкнулись:

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

Ряды с разной штриховкой

Поле в канале strokeDash тоже создаёт несколько рядов, различающихся видом линии:

Группировку можно применять и для отдельных участков линии с разным оформлением:

Группировка через detail

Канал detail группирует линии по полю без сопоставления поля с визуальными свойствами. Так можно построить несколько рядов одного цвета:

Тот же приём группирует отрезки в точечной диаграмме с диапазонами:

Маркеры точек на линии

Значение point: true или объект свойств точек накладывает на линию маркеры записей:

Результат равнозначен добавлению отдельного слоя заполненных точек:

Наложенные маркеры по умолчанию непрозрачны (opacity: 1), в отличие от обычных точек. Здесь точки с обводкой создаются значениями "filled": false и "fill": "white":

Пропуски данных

Некорректное значение x или y — null либо NaN — по умолчанию разрывает линию:

Одинокая точка без соединения с соседями при этом обычно не видна:

Чтобы показать её, можно задать strokeCap: "square":

Или наложить точечные маркеры:

Диаграмма рассеяния с соединением точек

Как показано выше, путь линии (порядок её точек) по умолчанию определяется значениями временного или порядкового поля. Поле в канале order позволяет задать собственный порядок.

Например, чтобы показать изменение связи цены бензина и среднего пробега на человека во времени, канал order сортирует точки по полю year. Свойство point накладывает точечные маркеры поверх линии, выделяя каждую запись данных:

Интерполяция

Свойство interpolate определения примитива выбирает способ построения линии между точками. Например, "monotone" даёт плавную кривую без колебаний между значениями:

Значение "step-after" создаёт ступенчатую линию:

Полный список методов interpolate приведён в разделе свойств линии.

Географическая линия

Каналы longitude и latitude вместе с соответствующей географической проекцией соединяют точки по координатам:

Настройка линий

// Спецификация представления верхнего уровня
{
  ...,
  "config": {
    "line": ...,
    ...
  }
}

Свойство line объекта config верхнего уровня задаёт стандартные свойства всех линий. Каналы свойств примитива переопределяют эти значения.

Конфигурация может содержать любые свойства линий, кроме type, style и clip.