Vega-Lite单线或多色标记

Question

我正在尝试绘制类似尾迹的图形，但可以在其中绘制线条颜色而不是线条大小。那可能吗？到目前为止，我还无法实现。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "mark": "trail",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "size": {"field": "good", "type": "nominal"}
  }
}

这是在使用带尾号的尺寸时。

如果我将其映射到颜色，则为

Answer 1

线在Vega-Lite中不能是多种颜色，但是您可以将颜色编码与插补转换一起使用，以更改线的不同部分（vega editor）的颜色：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative", "impute": {"value": null}},
    "color": {"field": "good", "type": "nominal"}
  }
}

不幸的是，这使行中断了；您可以通过创建这样的背景层（vega editor）来解决此问题：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol==='GOOG'"},
    {"calculate": "datum.price>400", "as": "good"}
  ],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative", "impute": {"value": null}}
  },
  "layer": [
    {"mark": "line"},
    {
      "mark": "line",
      "encoding": {"color": {"field": "good", "type": "nominal"}}
    }
  ]
}

---

编辑：如果您使用的是Altair，则等效项如下：

import altair as alt
from vega_datasets import data

alt.layer(
    alt.Chart().mark_line(),
    alt.Chart().mark_line().encode(color='good:N'),
    data=data.stocks.url
).transform_filter(
    'datum.symbol==="GOOG"',
).transform_calculate(
    good="datum.price>400"
).encode(
    x='date:T',
    y=alt.Y('price:Q', impute={'value': None})
)