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

vega-lite线条图-转换过滤器中未应用颜色

1 个答案: