为什么 vega-lite 为图例设置为空的图层绘制图例？

Question

我有一个图，其中两类数据各有一个单独的图层。每个类别都有两个子类别。只有第一个顶级类别应该有图例。所以我把legend: null放在第二类，在顶层放一个resolve，使图例independent。但它不起作用。这是情节，下面是我的代码。我希望在图例中只看到 a 和 b。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>legend test</title>
    <link rel="stylesheet" href="styles/style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5.9.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.2.2"></script>
  </head>
  <body>
    <div id="plot-div"></div>
    <script>
let spec = {
    $schema: "https://vega.github.io/schema/vega-lite/v4.json",
    description: "sigmatcher",
    data: {
        values: [
            {legendGroup: true, x: 1, y: 1, cat: "a"},
            {legendGroup: true, x: 2, y: 2, cat: "b"},
            {legendGroup: true, x: 3, y: 4, cat: "a"},
            {legendGroup: true, x: 4, y: 8, cat: "b"},
            {legendGroup: false, x: 1, y: 11, cat: "c"},
            {legendGroup: false, x: 2, y: 12, cat: "d"},
            {legendGroup: false, x: 3, y: 14, cat: "c"},
            {legendGroup: false, x: 4, y: 18, cat: "d"},
            {legendGroup: false, x: 5, y: 26, cat: "c"},
        ]},
    width: 400,
    height: 400,
    resolve: {
        legend: {
            color: "independent",
        }
    },
    layer: [{
        transform: [{
            filter: {
                field: "legendGroup",
                equal: true
            }}],
        encoding: {
            x: {
                field: "x",
                type: "quantitative"
            },
            y: {
                field: "y",
                type: "quantitative"
            },
            color: {
                field: "cat",
                type: "nominal"
            }
        },
        mark: {
            type: "point"
        }
    }, {
        transform: [{
            filter: {
                field: "legendGroup",
                equal: false
            }}],
        encoding: {
            x: {
                field: "x",
                type: "quantitative"
            },
            y: {
                field: "y",
                type: "quantitative"
            },
            color: {
                field: "cat",
                type: "nominal",
                legend: null
            }
        },
        mark: {
            type: "point"
        }
    }]};
vegaEmbed("#plot-div", spec);
    </script>
  </body>
</html>

Answer 1

除非您另有说明，否则独立图例仍将共享色标。您可以通过指定 resolve.scale.

来更改它

在你的情况下，而不是

"resolve": {"legend": {"color": "independent"}}

你应该使用

"resolve": {"scale": {"color": "independent"}}

否则尽管图例是独立的，但比例仍然会被共享。如果需要，您可以调整每个图层使用的配色方案来区分点。

查看实际效果 here：

为什么 vega-lite 为图例设置为空的图层绘制图例？

Why does vega-lite draw the legend for layers that have legend set to null?

vega-lite