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

Question

Vega 编辑器 link here

我在多折线图中根据过滤条件更改了叠加层颜色。可以使用单行但 'red' 覆盖线（连同红点）不会出现上面的多行示例。谁能帮帮我？

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

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

vega-lite line plot - color not getting applied in transform filter

vega

vega-lite