Поле filled и stroke

Визуальные примитивы Vega и Vega-Lite строятся на основе графических marks: rect, symbol, line, area, arc, text, trail и других. Для управления внешним видом этих объектов используются свойства заливки и обводки. Центральную роль здесь играют поля filled и stroke.

Эти параметры определяют:

  • каким образом объект окрашивается;
  • отображается ли внутренняя область фигуры;
  • как рисуется контур;
  • каким будет поведение mark при рендеринге.

Свойство filled

Назначение

Поле filled определяет, должен ли mark использовать внутреннюю заливку (fill) или только обводку (stroke).

Тип значения:

filled: true | false

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

filled: true

Как работает filled

Если:

filled: true

то объект использует свойство fill.

Если:

filled: false

то заливка отключается, а цвет mark берётся из stroke.

Пример filled: true

{
  "mark": {
    "type": "point",
    "filled": true,
    "fill": "steelblue"
  }
}

Результат:

  • точки имеют внутреннюю закраску;
  • цвет задаётся через fill;
  • контур либо отсутствует, либо задаётся отдельно.

Пример filled: false

{
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "red"
  }
}

Результат:

  • точки становятся полыми;
  • отображается только контур;
  • внутренняя область прозрачна.

Влияние на mark point

Для point параметр filled особенно важен.

Filled point

{
  "mark": {
    "type": "point",
    "filled": true,
    "fill": "green",
    "size": 100
  }
}

Точка выглядит как закрашенный круг.

Hollow point

{
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "green",
    "strokeWidth": 2,
    "size": 100
  }
}

Точка отображается как кольцо.

Разница между fill и filled

Эти параметры часто путают.

fill

Определяет цвет внутренней области:

fill: "orange"

filled

Определяет, используется ли вообще внутренняя заливка:

filled: false

Сравнение

Только fill

{
  "mark": {
    "type": "point",
    "fill": "blue"
  }
}

Точка закрашена.

filled: false

{
  "mark": {
    "type": "point",
    "filled": false,
    "fill": "blue",
    "stroke": "red"
  }
}

fill игнорируется.

Отображается только красная обводка.

Когда использовать filled: false

Для выделения серий

Полые точки хорошо подходят для:

  • overlay-графиков;
  • сравнения нескольких категорий;
  • выделения активной серии;
  • визуального уменьшения плотности данных.

Для минималистичного дизайна

{
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "#333"
  }
}

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

  • в аналитических dashboard;
  • научных публикациях;
  • инженерных визуализациях.

Для улучшения читаемости

При большом количестве точек закрашенные marks могут сливаться.

Полые элементы:

  • уменьшают визуальный шум;
  • позволяют видеть пересечения;
  • делают график легче для восприятия.

Свойство stroke

Назначение

Поле stroke задаёт цвет обводки.

Тип:

stroke: "<color>"

Примеры:

stroke: "black"
stroke: "#ff0000"
stroke: "rgb(0,0,255)"

Базовый пример

{
  "mark": {
    "type": "rect",
    "fill": "lightblue",
    "stroke": "darkblue"
  }
}

Результат:

  • прямоугольник закрашен светло-синим;
  • контур тёмно-синий.

Использование stroke без fill

{
  "mark": {
    "type": "circle",
    "fill": null,
    "stroke": "red"
  }
}

Фигура становится прозрачной внутри.

Связь между stroke и strokeWidth

Цвет обводки почти всегда используется вместе с толщиной линии.

Пример

{
  "mark": {
    "type": "rect",
    "stroke": "black",
    "strokeWidth": 3
  }
}

Поле strokeWidth

Определяет толщину границы:

strokeWidth: 2

Единица измерения — пиксели.

Тонкая и толстая обводка

Тонкая

{
  "stroke": "black",
  "strokeWidth": 1
}

Толстая

{
  "stroke": "black",
  "strokeWidth": 6
}

Толстая граница:

  • усиливает акцент;
  • помогает выделить объект;
  • повышает контраст.

Свойство strokeOpacity

Позволяет регулировать прозрачность контура.

Пример

{
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "red",
    "strokeOpacity": 0.4
  }
}

Диапазон:

0 → полностью прозрачно
1 → полностью непрозрачно

Свойство strokeDash

Создаёт пунктирную линию.

Пример

{
  "mark": {
    "type": "line",
    "stroke": "black",
    "strokeDash": [4, 2]
  }
}

Интерпретация:

4px линия
2px пробел

Свойство strokeCap

Определяет форму концов линии.

Варианты:

"butt"
"round"
"square"

Пример

{
  "mark": {
    "type": "line",
    "stroke": "blue",
    "strokeWidth": 8,
    "strokeCap": "round"
  }
}

Свойство strokeJoin

Управляет соединениями сегментов линии.

Варианты:

"miter"
"round"
"bevel"

Пример

{
  "mark": {
    "type": "line",
    "stroke": "black",
    "strokeJoin": "round"
  }
}

Использование stroke в line charts

Для line обводка является основным способом отображения.

{
  "mark": {
    "type": "line",
    "stroke": "steelblue",
    "strokeWidth": 2
  }
}

Использование stroke в area charts

У area-графиков можно отдельно настроить:

  • внутреннюю область;
  • контур.

Пример

{
  "mark": {
    "type": "area",
    "fill": "lightblue",
    "stroke": "blue"
  }
}

Использование stroke в bar charts

{
  "mark": {
    "type": "bar",
    "fill": "#90caf9",
    "stroke": "#1565c0",
    "strokeWidth": 1
  }
}

Контур помогает:

  • отделять соседние столбцы;
  • улучшать читаемость;
  • усиливать структуру графика.

Поле filled в Vega-Lite

В Vega-Lite свойство особенно распространено для:

  • point;
  • circle;
  • square.

Пример scatter plot

{
  "data": {
    "values": [
      {"x": 1, "y": 2},
      {"x": 2, "y": 3},
      {"x": 3, "y": 5}
    ]
  },
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "darkred",
    "strokeWidth": 2
  },
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

Динамическое управление stroke

Обводку можно привязать к данным.

Пример

{
  "encoding": {
    "stroke": {
      "field": "category",
      "type": "nominal"
    }
  }
}

Каждая категория получает собственный цвет контура.

Динамическое управление fill

{
  "encoding": {
    "fill": {
      "field": "group",
      "type": "nominal"
    }
  }
}

Комбинация fill и stroke

Один из самых распространённых приёмов.

Пример

{
  "mark": {
    "type": "point",
    "fill": "white",
    "stroke": "blue",
    "strokeWidth": 2
  }
}

Результат:

  • белая внутренняя область;
  • синяя граница;
  • высокая контрастность.

Использование прозрачного fill

{
  "mark": {
    "type": "point",
    "fill": "transparent",
    "stroke": "red"
  }
}

Отличие fill: null и filled: false

fill: null

{
  "fill": null
}

Убирает цвет заливки.

filled: false

{
  "filled": false
}

Переключает механизм рендеринга на использование stroke.

Это более корректный способ создания hollow-point.

Практический пример сравнения

Filled points

{
  "mark": {
    "type": "point",
    "filled": true,
    "fill": "orange"
  }
}

Hollow points

{
  "mark": {
    "type": "point",
    "filled": false,
    "stroke": "orange"
  }
}

Особенности производительности

Большое количество сложных обводок может влиять на производительность.

Особенно затратны:

  • толстые strokeWidth;
  • прозрачные контуры;
  • сложные strokeDash;
  • большое количество hollow-points.

Влияние на экспорт SVG

При экспорте в SVG свойства stroke и fill напрямую превращаются в SVG-атрибуты:

fill="blue"
stroke="black"
stroke-width="2"

Это делает Vega совместимой с:

  • браузерным SVG;
  • редакторами векторной графики;
  • системами генерации отчётов.

Влияние на Canvas rendering

При использовании Canvas Vega транслирует свойства в Canvas API:

context.fillStyle
context.strokeStyle
context.lineWidth

Совместное использование с condition

Поля можно изменять условно.

Пример

{
  "encoding": {
    "stroke": {
      "condition": {
        "test": "datum.value > 100",
        "value": "red"
      },
      "value": "gray"
    }
  }
}

Использование в интерактивных графиках

Hover-эффект

{
  "selection": {
    "hover": {
      "type": "single",
      "on": "mouseover"
    }
  },
  "encoding": {
    "strokeWidth": {
      "condition": {
        "selection": "hover",
        "value": 4
      },
      "value": 1
    }
  }
}

Лучшие практики

Использование filled: false

Подходит для:

  • dense scatter plots;
  • overlay-графиков;
  • аналитических интерфейсов;
  • multi-series charts.

Использование stroke

Контур полезен:

  • для повышения читаемости;
  • разделения объектов;
  • создания акцентов;
  • построения минималистичного дизайна.

Не использовать слишком толстые границы

Слишком большой strokeWidth:

  • визуально перегружает график;
  • ухудшает читаемость;
  • делает marks неаккуратными.

Типичные ошибки

Ошибка: fill без filled

{
  "filled": false,
  "fill": "blue"
}

fill не будет использоваться.

Ошибка: отсутствие stroke

{
  "filled": false
}

Объект может стать невидимым.

Ошибка: слишком прозрачный контур

{
  "strokeOpacity": 0.05
}

Контур почти исчезает.

Сравнение стратегий оформления

Стиль Настройки
Закрашенные точки filled: true + fill
Полые точки filled: false + stroke
Минимализм тонкий stroke
Акцент толстый strokeWidth
Научная визуализация hollow points
Dashboard умеренный stroke

Краткая сводка свойств

Свойство Назначение
filled Использовать ли внутреннюю заливку
fill Цвет внутренней области
fillOpacity Прозрачность заливки
stroke Цвет контура
strokeWidth Толщина контура
strokeOpacity Прозрачность контура
strokeDash Пунктир
strokeCap Форма концов линии
strokeJoin Соединение сегментов
Оглавление