Отладка

Здесь собраны методы отладки визуализаций Vega во время выполнения. Во всех примерах предполагается, что экземпляр представления Vega записан в переменную view. В онлайн-редакторе откройте консоль отладки и используйте VEGA_DEBUG.view, чтобы получить доступ к представлению.

Методы отладки

Просмотр значений сигналов

Для просмотра значения сигнала используйте метод view.signal:

view.signal('name') // возвращает значение сигнала 'name'

Этим же методом можно задать значение сигнала. После изменения значения вызовите view.run(), чтобы повторно выполнить поток данных.

view.signal('name', value).run(); // обновить сигнал и выполнить поток данных

Метод view.signal возвращает только сигналы, определённые на верхнем уровне спецификации Vega. Для просмотра сигналов во вложенных групповых примитивах создайте снимок состояния или изучите область выполнения.

Просмотр наборов данных

Для просмотра набора данных используйте метод view.data:

view.data('name') // возвращает массив объектов набора данных 'name'

Метод view.data возвращает данные после выполнения преобразований. Доступ к входным и выходным данным описан в разделе просмотра области выполнения. Метод также возвращает только наборы данных верхнего уровня спецификации Vega. Для просмотра наборов во вложенных групповых примитивах создайте снимок состояния или изучите область выполнения.

Снимок состояния сигналов и данных

Метод view.getState возвращает снимок текущего состояния сигналов и наборов данных. Метод view.setState позволяет восстановить сохранённое состояние, что может пригодиться при тестировании.

view.getState() // {signals: [...], data: [...], subcontext: [...]}

Метод view.getState возвращает объект со словарями всех именованных signals и входных наборов data. Данные сохраняются до применения преобразований: так удобнее возвращать визуализацию к прежнему состоянию. Если во вложенных групповых примитивах определены сигналы или наборы данных, свойство subcontext содержит состояние всех вложенных областей.

Просмотр графа сцены

При отладке полезно просматривать визуальные свойства элементов графа сцены и связанные с ними объекты данных. В консоли получите граф сцены методом view.scenegraph. Начните со свойства root; элементы групп и других примитивов находятся в свойстве items.

var root = view.scenegraph().root; // {marktype: "group", items: [...], ...}

Просматривать дерево графа сцены вручную бывает неудобно. Если используется SVG-рендерер, к элементу можно обратиться напрямую. Например, в Chrome нажмите на элемент правой кнопкой мыши и выберите «Просмотреть код». Соответствующий SVG-элемент будет доступен в глобальной переменной $0. Тогда элемент графа сцены Vega находится в $0.__data__, а связанный с ним объект данных — в $0.__data__.datum.

Отладка выражений

В выражения можно добавить сообщения для отладки через методы журналирования warn, info и debug. Последний аргумент метода становится его возвращаемым значением. Благодаря этому можно добавить журналирование в существующее выражение, не меняя логику спецификации.

Чтобы сообщения выводились в консоль, задайте представлению Vega подходящий уровень журналирования. Например, для вывода предупреждений:

view.logLevel(vega.Warn);

Просмотр области выполнения

Если перечисленных методов недостаточно, можно изучить внутреннее устройство графа потока данных Vega. Граф состоит из операторов (или узлов), которые вычисляют значения и обрабатывают потоки объектов данных. Операторы связаны зависимостями; свойство value каждого узла содержит вычисленное значение.

Для доступа к операторам верхнего уровня используйте свойство view._runtime. Оно не входит в официальный API Vega, но может помочь при сложной отладке. Не изменяйте свойства объекта времени выполнения. После такого изменения поведение визуализации не определено.

view._runtime // {signals: {}, data: {}, scales: {}, nodes: {}, subcontext: [], ...}

Объект области выполнения содержит следующие свойства:

  • signals — операторы потока данных для каждого именованного сигнала.
  • data — узлы input, output и values каждого именованного набора данных. Узел input содержит объекты до преобразований, а values — после них.
  • scales — операторы для именованных шкал и проекций.
  • nodes — таблица всех операторов текущей области (включая преобразования) с доступом по идентификатору.
  • subcontext — массив областей выполнения вложенных групповых примитивов.