如何将较长文本的文本框添加到 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
      }
    }
  ]
}