自定义 vega-lite 线图轴标签

Question

我想做的事情很简单，但我似乎做不对。我有一种感觉，我会因为这个答案而感到尴尬！

我有一个折线图，x 轴为 "attempt"，y 轴为 "grade"，等级是 0 到 100 之间的数字。我只想更改 y -axis 这样，不是看到原始数字，而是显示一个等级，比如 0 - 20 代表 "E"，20-40 代表 "D" 等直到 "A"（80-100 ).我怎样才能做到这一点？我不想使用离散值，因为我想直观地显示成绩在成绩边界内的哪个位置。我不确定我是否还想简单地在线显示等级带或将它们放在刻度线的中间，但只要做到这一点就会有很大帮助！

以下是我在 vega-lite 编辑器中使用的内容：



    {
      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
      "data": {
        "values": [
          {
            "attempt": 1,
            "score": 30
          },
          {
            "attempt": 2,
            "score": 60
          },
          {
            "attempt": 3,
            "score": 75
          },
          {
            "attempt": 4,
            "score": 58
          },
          {
            "attempt": 5,
            "score": 67
          }
        ]
      },
      "mark": {
        "type": "line",
        "color": "#22bc9a",
        "point": {
          "filled": false
        }
      },
      "encoding": {
        "x": {
          "field": "attempt",
          "type": "quantitative",
          "axis": {
            "grid": false,
            "tickCount": 5,
            "title": "Attempt"
          }
        },
        "y": {
          "field": "score",
          "scale": {"domain": [0, 100]},
          "type": "quantitative",
          "axis": {
            "tickCount": 5,
            "title": "Grade"
          }
        },
        "opacity": {"value": 0.3}
      },
      "config": {
        "autosize": "fit",
        "axis": {
          "labelColor": "#bebec8",
          "tickColor": "#bebec8",
          "titleColor": "black",
          "titleFontWeight": "normal",
          "titleFontSize": 11,
          "labelFont": "Helvetica",
          "titleFont": "Helvetica",
          "gridOpacity": 0.4,
          "gridWidth": 1.5,
          "domain": false
        },
        "view": {
          "strokeWidth": 0
        }
      }
    }

提前致谢。

Answer 1

为了让它工作，我首先必须将 x 和 y 轴的编码更改为序数。然后，在创建模式之前，我将您的输入数据值映射到字母等级：

//replace every score value with correct letter grade values.forEach(datapoint => { if(datapoint.score > 90) { datapoint.score = "A"; } else if(datapoint.score > 80) { datapoint.score = "B"; } else if (datapoint.score > 70) { //so on... } });

这是 vega-lite 编辑器中的一个工作示例： Line Chart with Ordinal Values

架构如下：

{ "$schema": "https://vega.github.io/schema/vega-lite/v3.json", "data": { "values": [ { "attempt": 1, "score": "F" }, { "attempt": 2, "score": "D" }, { "attempt": 3, "score": "C" }, { "attempt": 4, "score": "F" }, { "attempt": 5, "score": "D" } ] }, "mark": { "type": "line", "color": "#22bc9a", "point": { "filled": false } }, "encoding": { "x": { "field": "attempt", "type": "ordinal", "axis": { "title": "Attempt" } }, "y": { "field": "score", "type": "ordinal", "axis": { "title": "Grade" } }, "opacity": {"value": 0.3} }, "config": { "autosize": "fit", "axis": { "labelColor": "#bebec8", "tickColor": "#bebec8", "titleColor": "black", "titleFontWeight": "normal", "titleFontSize": 11, "labelFont": "Helvetica", "titleFont": "Helvetica", "gridOpacity": 0.4, "gridWidth": 1.5 }, "view": { "strokeWidth": 0 } } }

Answer 2

这样的事情怎么样：我添加了一个带有成绩类别的数据框，并用它来分层一些文本。我删除了轴的标签，因此文本就像是轴的标签一样。

图表看起来像这样，here is a link to the editor：

Schema（请注意，我是用 Python 的 Altair 做的，所以它可能不是规范的 Vega-lite，我也没有使用你的设置，抱歉）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "datasets": {
    "data-1acee7c5d817865a529b53e022474ce8": [
      {
        "label": "E",
        "x_min": 1,
        "y_med": 10
      },
      {
        "label": "D",
        "x_min": 1,
        "y_med": 30
      },
      {
        "label": "C",
        "x_min": 1,
        "y_med": 50
      },
      {
        "label": "B",
        "x_min": 1,
        "y_med": 70
      },
      {
        "label": "A",
        "x_min": 1,
        "y_med": 90
      }
    ],
    "data-8e6359ea3034b8410708361bb10fafd5": [
      {
        "attempt": 1,
        "score": 30
      },
      {
        "attempt": 2,
        "score": 60
      },
      {
        "attempt": 3,
        "score": 75
      },
      {
        "attempt": 4,
        "score": 58
      },
      {
        "attempt": 5,
        "score": 67
      }
    ]
  },
  "layer": [
    {
      "data": {
        "name": "data-1acee7c5d817865a529b53e022474ce8"
      },
      "encoding": {
        "text": {
          "field": "label",
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        },
        "y": {
          "axis": {
            "labels": false,
            "tickCount": 5,
            "ticks": false
          },
          "field": "y_med",
          "type": "quantitative"
        }
      },
      "mark": {
        "dx": -15,
        "dy": 8,
        "size": 15,
        "type": "text"
      }
    },
    {
      "data": {
        "name": "data-8e6359ea3034b8410708361bb10fafd5"
      },
      "encoding": {
        "x": {
          "axis": {
            "tickCount": 5
          },
          "field": "attempt",
          "title": "Attempt",
          "type": "quantitative"
        },
        "y": {
          "field": "score",
          "scale": {
            "domain": [
              0,
              100
            ]
          },
          "title": "Grade",
          "type": "quantitative"
        }
      },
      "mark": {
        "point": true,
        "type": "line"
      }
    }
  ]
}

对类别使用略微修改的数据框（添加了 x_max、y_min 和 y_max），您可以添加另一个带有彩色矩形的层，这有助于读取值:

这是一个link to the editor

这是架构

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "datasets": {
    "data-1acee7c5d817865a529b53e022474ce8": [
      {
        "label": "E",
        "x_min": 1,
        "y_med": 10
      },
      {
        "label": "D",
        "x_min": 1,
        "y_med": 30
      },
      {
        "label": "C",
        "x_min": 1,
        "y_med": 50
      },
      {
        "label": "B",
        "x_min": 1,
        "y_med": 70
      },
      {
        "label": "A",
        "x_min": 1,
        "y_med": 90
      }
    ],
    "data-39ffbda2b5d5fe96de84d9e308d920ff": [
      {
        "label": "E",
        "x_max": 5,
        "x_min": 1,
        "y_max": 20,
        "y_med": 10,
        "y_min": 0
      },
      {
        "label": "D",
        "x_max": 5,
        "x_min": 1,
        "y_max": 40,
        "y_med": 30,
        "y_min": 20
      },
      {
        "label": "C",
        "x_max": 5,
        "x_min": 1,
        "y_max": 60,
        "y_med": 50,
        "y_min": 40
      },
      {
        "label": "B",
        "x_max": 5,
        "x_min": 1,
        "y_max": 80,
        "y_med": 70,
        "y_min": 60
      },
      {
        "label": "A",
        "x_max": 5,
        "x_min": 1,
        "y_max": 100,
        "y_med": 90,
        "y_min": 80
      }
    ],
    "data-8e6359ea3034b8410708361bb10fafd5": [
      {
        "attempt": 1,
        "score": 30
      },
      {
        "attempt": 2,
        "score": 60
      },
      {
        "attempt": 3,
        "score": 75
      },
      {
        "attempt": 4,
        "score": 58
      },
      {
        "attempt": 5,
        "score": 67
      }
    ]
  },
  "layer": [
    {
      "data": {
        "name": "data-39ffbda2b5d5fe96de84d9e308d920ff"
      },
      "encoding": {
        "color": {
          "field": "label",
          "scale": {
            "scheme": "greenblue"
          },
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "title": "Attempt",
          "type": "quantitative"
        },
        "x2": {
          "field": "x_max",
          "type": "quantitative"
        },
        "y": {
          "axis": null,
          "field": "y_min",
          "type": "quantitative"
        },
        "y2": {
          "field": "y_max",
          "type": "quantitative"
        }
      },
      "mark": "rect"
    },
    {
      "data": {
        "name": "data-1acee7c5d817865a529b53e022474ce8"
      },
      "encoding": {
        "text": {
          "field": "label",
          "type": "ordinal"
        },
        "x": {
          "field": "x_min",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        },
        "y": {
          "axis": {
            "labels": false,
            "tickCount": 5,
            "ticks": false
          },
          "field": "y_med",
          "type": "quantitative"
        }
      },
      "mark": {
        "dx": -15,
        "dy": 8,
        "size": 15,
        "type": "text"
      }
    },
    {
      "data": {
        "name": "data-8e6359ea3034b8410708361bb10fafd5"
      },
      "encoding": {
        "x": {
          "axis": {
            "tickCount": 5
          },
          "field": "attempt",
          "title": "Attempt",
          "type": "quantitative"
        },
        "y": {
          "field": "score",
          "scale": {
            "domain": [
              0,
              100
            ]
          },
          "title": "Grade",
          "type": "quantitative"
        }
      },
      "mark": {
        "point": true,
        "type": "line"
      }
    }
  ]
}

自定义 vega-lite 线图轴标签

Customise vega-lite Line Graph Axis Labels

vega-lite