линейный сюжет vega-lite - цвет не применяется в фильтре преобразования - PullRequest
Новая
       11

линейный сюжет vega-lite - цвет не применяется в фильтре преобразования

0 голосов
/ 18 января 2019

Vega Editor ссылка здесь

У меня изменилось наложение цвета в зависимости от состояния фильтра в многострочном графике. Получилось, что он работает с одной линией здесь , но красная линия наложения (вместе с красной точкой) не подходит для приведенного выше многострочного примера. Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 18 января 2019

Краткий ответ: ваша диаграмма работает, за исключением того, что отфильтрованные значения не окрашены в красный цвет.

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

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A scatterplot showing horsepower and miles per gallons.",
  "data": {"url": "data/cars.json"},
  "mark": {"type": "point", "color": "red"},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"},
    "shape": {"field": "Origin", "type": "nominal"}
  }
}

enter image description here

Обратите внимание, что, хотя мы указываем, что метка должна иметь красный цвет, она переопределяется кодировкой цвета.Это разработано в Vega-Lite, потому что кодировки более специфичны, чем свойства.

Вернуться к диаграмме: поскольку вы задаете цветовую кодировку в родительской диаграмме, каждый отдельный слой наследует эту цветовую кодировку и эти цветапереопределите "color": "red", который вы указываете на отдельных слоях.

Чтобы заставить его делать то, что вы хотите, вы можете переместить цветовую кодировку на отдельные слои (и использовать кодировку detail, чтобы гарантировать, что данныевсе еще сгруппированы по этому полю).Например ( ссылка редактора ): 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {...},
  "width": 1000,
  "height": 200,
  "autosize": {"type": "pad", "resize": true},
  "transform": [
    {
      "window": [{"op": "rank", "as": "rank"}],
      "sort": [{"field": "dateTime", "order": "descending"}]
    },
    {"filter": "datum.rank <= 100"}
  ],
  "layer": [
    {
      "mark": {"type": "line"},
      "encoding": {
        "color": {
          "field": "name",
          "type": "nominal",
          "legend": {"title": "Type"}
        }
      }
    },
    {
      "mark": {"type": "line", "color": "red"},
      "transform": [
        {
          "as": "count",
          "calculate": "if(datum.anomaly == true, datum.count, null)"
        },
        {"calculate": "true", "as": "baseline"}
      ]
    },
    {
      "mark": {"type": "circle", "color": "red"},
      "transform": [
        {"filter": "datum.anomaly == true"},
        {"calculate": "true", "as": "baseline"}
      ]
    }
  ],
  "encoding": {
    "x": {
      "field": "dateTime",
      "type": "temporal",
      "timeUnit": "hoursminutesseconds",
      "sort": {"field": "dateTime", "op": "count", "order": "descending"},
      "axis": {"title": "Time", "grid": false}
    },
    "y": {
      "field": "count",
      "type": "quantitative",
      "axis": {"title": "Count", "grid": false}
    },
    "detail": {"field": "name", "type": "nominal"}
  }
}
...