如何在 vega-lite 的圖表中添加帶有較長文本的文本框？

Question

我有一個帶有第二層的散點圖，兩行帶有基准數據，現在我需要這些行的圖例。 我已經設法將它們包含在散點圖的圖例中，但這無濟於事，因為圖例名稱不適合這些附加行，尤其是描述太長，無法顯示為圖例條目。

我所擁有的是這個（圖例中最低的兩點）：圖例中只有兩個詞用於描述

我需要的是這個：

帶有描述的彩色文本框

   const spec = {
    ...sharedChartSpec,
    height: 350,
    config: {
        axis: {
            tickColor: 'lightgrey',
            titleFontSize: 15,
            grid:false
        },
        style: {
            cell: {
                stroke: "transparent"
            }
        },
    },
    // title: {text: "Spezifischer Energieverbrauch [kWh/m2]", align: "center"},
    layer: [
       {
            data: {name: 'values'}, // note: vega-lite data attribute is a plain object instead of an array,
            mark: {type: 'circle', size: 20, opacity: 1},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: ''}, "scale": {"domain": [1880,2022]}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}, "scale": {"domain": [0, 350]}},
                color: {field: 'heater', type: 'nominal', scale: customScale, title: 'Energieträger'},
                opacity: {condition: {param: "Heater", value: 1},
                    value: 0.2},
                tooltip: [
                    {field: "address", type: "nominal", title:'Adresse', fontSize:5},
                    {field: "town", type: "nominal", title:'Ort'},
                    {field: "heater", type: "nominal", title:'Primärer Energieträger'},
                    {field: "consumption_perm2", type: "quantitative", title:'Verbrauch in kWh/m2'},
                    {field: "EEK", type: "nominal", title:'EEK'}
                ]
            },

            params: [
                {
                    "name": "grid",
                    "select": "interval",
                    "bind": "scales"
                },
                {
                    "name": "Heater",
                    "select": {"type": "point", "fields": ["heater"]},
                    "bind": "legend"
                }
            ],
       },
       {
            data: {name: 'benchmark'},
            mark: {type: 'line'},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: null}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}},
                color: {field: 'typ', type: 'nominal', scale: customScale},
        }
        },
        {
            data: {name: 'demand'},
            mark: {type: 'line'},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: null}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}},
                color: {field: 'typ', type: 'nominal', scale: customScale},
            },
        }
       ]
}

Answer 1

我不能重用您的代碼，但這里是一個多行注釋的示例，您應該能夠在其上進行構建。

編輯

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "encoding": {
        "x": {"aggregate": "max", "field": "date", "type": "temporal"},
        "y": {
          "aggregate": {"argmax": "date"},
          "field": "price",
          "type": "quantitative"
        }
      },
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "text": ["Line 1", "Line 2"]
      }
    }
  ]
}

Answer 2

您可以使用 dx 和 dy 屬性將文本放置在您想要的任何位置。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "text": ["Line 1", "Line 2"],
        "dx": 150,
        "dy": -50
      }
    }
  ]
}