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为图例设置为null的图层绘制图例？

1 个答案: