мгновенный выбор недели / месяца / года - PullRequest
Новая
       11

мгновенный выбор недели / месяца / года

1 голос
/ 01 октября 2019

Я использую Vega Lite в приложении кроссфильтрации с внешним источником данных.

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

Я не вижу ничего об этом в документации по выборам , поэтому я думаю, что мне, вероятно, потребуется сгенерировать спецификацию Vega из Vega Litespec, а затем исправьте его. Это еще не то, что я сделал, но мне не терпится узнать.

Однако я удивлен, что не нашел этот вопрос на SO, GitHub или Slack. Я думаю, что я искал все комбинации {vega, vega-lite} x {round, snap}.

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

Использую ли я неправильную терминологию?

1 Ответ

0 голосов
/ 28 октября 2019

Оказывается, проблема с привязкой порядковых шкал больше связана с привязкой к временным интервалам, и этот комментарий Джеффа Хира полностью охватывает тему.

Полученные выражения Vega длинные,но процесс прост:

  1. Получить значение x-координаты.
  2. Провести его через инверсию масштаба (x.invert) для отображения из области пикселей в область данных.
  3. Выполнение «привязки» путем округления / усечения значений в области данных.
  4. Повторное применение шкалы x для получения координаты привязанного пикселя.

Мы можем изменить поля update в signals для реализации этого усечения.

привязка к году

Скажем, выбор имеет имя selection1. Vega-Lite сгенерирует спецификацию Vega, включая сигнал selection1_x (отредактированный для краткости): 

{
  "name": "selection1_x",
  "value": [],
  "on": [
    {
      "events": {
        "source": "scope",
        "type": "mousedown",
        "filter": // ... 
      },
      "update": "[x(unit), x(unit)]"
    },
    {
      "events": {
        "source": "scope",
        "type": "mousemove",
        "between": // ...
      },
      "update": "[selection1_x[0], clamp(x(unit), 0, width)]"
    },
    // ...

Мы можем заменить выражения x(unit) в первом элементе on и clamp(x(unit), 0, width)выражение во втором элементе on, используя шаги, описанные выше: 

{
  "name": "selection1_x",
  "value": [],
  "on": [
    {
      "events": {
        "source": "scope",
        "type": "mousedown",
        "filter": // ...
      },
      "update": "[scale(\"x\",datetime(year(invert(\"x\",x(unit))),0)),scale(\"x\",datetime(year(invert(\"x\",x(unit))),0))]"
    },
    {
      "events": {
        "source": "scope",
        "type": "mousemove",
        "between": // ...
      },
      "update": "[selection1_x[0],scale(\"x\",datetime(year(invert(\"x\",clamp(x(unit),0,width))),0))]"
    },
    // ...

Строки становятся длинными, и это без учета интервалов, меньших года. Вы, вероятно, не хотите писать этот материал вручную!

меньшие интервалы

Этот метод поддерживает усечение до любого из параметров выражения Vega datetime :

datetime(year, month[, day, hour, min, sec, millisec]) Возвращает новый Date экземпляр. Месяц начинается с 0, поэтому 1 представляет февраль.

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

неделя

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

[selection1_x[0], scale("x", datetime(
    year(invert("x", clamp(x(unit),0,width))),
    month(invert("x", clamp(x(unit),0,width))),
    date(invert("x", clamp(x(unit),0,width)))
        - day(invert("x", clamp(x(unit),0,width)))))]

Я недостаточно хорошо изучил Vega, чтобы знать, могу ли я упростить эти выражения,

вперед

Также vega-time равно в конвейере , что обеспечивает функциональность d3-временных интервалов , так что это должно стать намного прощев ближайшее время!

...