重命名 Vega Graphs 中的图例值，并保持颜色一致

Question

我的数据包含 3 列 - 日期、类别和值。类别是我想扩展的短字符串代码，例如"r" => "regular"、"n" => "prohibited" 等，并显示正确的图例字符串。有没有办法让映射{"r":"regular", "n": "prohibited"}- unlisted 会按原样显示？

另外，由于我有很多相似的图表，我希望颜色保持一致。对类别进行排序没有帮助，因为并非所有图表都包含所有这些。如何设置映射{"r":"blue", "n": "#332211"} 我可以使用映射的类别名称，例如“常规”。所有未映射的值都应来自其他来源，例如 Categories20 等。

Answer 1

您可以在内置的“scatter”示例中使用此变体来为各个标签设置自定义标题。查看“legend_labels”比例。

{
  "width": 200,
  "height": 200,
  "data": [
    {
      "name": "iris",
      "url": "data/iris.json"
    }
  ],
  "scales": [
    {
      "name": "legend_labels",
      "type": "ordinal",
      "domain": ["setosa", "versicolor", "virginica"],
      "range": ["SET", "VER", "VIR"]
    },
    {
      "name": "x",
      "nice": true,
      "range": "width",
      "domain": {"data": "iris", "field": "data.sepalWidth"}
    },
    {
      "name": "y",
      "nice": true,
      "range": "height",
      "domain": {"data": "iris", "field": "data.petalLength"}
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "iris", "field": "data.species"},
      "range": ["#800", "#080", "#008"]
    }
  ],
  "axes": [
    {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
    {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
  ],
  "legends": [
    {
      "fill": "c",
      "title": "Species",
      "offset": 0,
      "properties": {
        "symbols": {
          "fillOpacity": {"value": 0.5},
          "stroke": {"value": "transparent"}
        },
        "labels": {
          "text": {"scale": "legend_labels", "field": "data"}
        }
      }
    }
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {"data": "iris"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.sepalWidth"},
          "y": {"scale": "y", "field": "data.petalLength"},
          "fill": {"scale": "c", "field": "data.species"},
          "fillOpacity": {"value": 0.5}
        },
        "update": {
          "size": {"value": 100},
          "stroke": {"value": "transparent"}
        },
        "hover": {
          "size": {"value": 300},
          "stroke": {"value": "white"}
        }
      }
    }
  ]
}

同样，您可以像上面的“c”比例那样自定义单个颜色。

不幸的是，目前没有任何方法可以为未映射的值自定义任何回退行为，因此您需要确保您的比例包含域中的所有值。为该功能提交增强请求可能会很好。