vega-lite 线图 - 颜色未应用于变换过滤器

Question

Vega 编辑器链接here

我在多折线图中根据过滤条件进行了叠加颜色更改。得到它与单行 here 一起工作，但“红色”覆盖线（连同红点）并没有出现上面的多行示例。谁能帮帮我？

Answer 1

简短回答：您的图表正常工作，但过滤后的值不是红色。

核心问题是编码总是取代标记属性，正如您在这个更简单的示例中看到的那样：editor link

{
  "$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"}
  }
}

请注意，尽管我们指定标记应为红色，但这已被颜色编码覆盖。这是 Vega-Lite 的设计，因为编码比属性更具体。

回到您的图表：因为您在父图表中指定了颜色编码，所以每个单独的图层都会继承该颜色编码，并且这些颜色会覆盖您在各个图层中指定的"color": "red"。

要使其达到您想要的效果，您可以将颜色编码移动到各个层（并使用detail 编码以确保数据仍按该字段分组）。例如（editor link）：

{
  "$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"}
  }
}