图例与甜甜圈图 vega 重叠

Question

我正在使用 Vega 创建一个圆环图，尽管我已经尝试了所有方法，但图例与图表重叠。

• 使用orient: bottom-right：https://imgur.com/RZ2msqF

• 我还尝试使用legendX, legendY 将图像放入空白空间，但文本被截断。

• 增加规范的width 会起作用，但它会自动居中可视化，并且我试图避免不必要的空白空间。

我正在寻找一种将图表向左对齐的方法，而不是自动居中，或者其他任何你们能想到的方法。谢谢！

Answer 1

您可以在 spec.json 文件的标记部分设置每个圆弧“饼图”的外半径，它除以宽度，因此将默认值增加到 2.5 或 3 对我有用。

"marks": [
    {
        "type": "arc",
        "from": {
            "data": "table"
        },
        "encode": {
            "enter": {
                "fill": {
                    "scale": "color",
                    "field": "id"
                },
                "x": {
                    "signal": "width / 2"
                },
                "y": {
                    "signal": "height / 2"
                }
            },
            "update": {
                "startAngle": {
                    "field": "startAngle"
                },
                "endAngle": {
                    "field": "endAngle"
                },
                "padAngle": {
                    "signal": "padAngle"
                },
                "innerRadius": {
                    "signal": "width / 4"
                },
                "outerRadius": {
                    "signal": "width / 2.5"
                },
                "cornerRadius": {
                    "signal": "cornerRadius"
                }
            }
        }
    }
]