如果外部和内部圆环图的值不相同，如何使它们成为一个完整的圆圈？

Question

我想在一个视觉对象中有两个圆环图，其中外部和内部代表不同的年份，并且都是一个完整的圆圈。如果外部和内部甜甜圈加起来不等于相同的数字，则外部或内部甜甜圈不会形成一个完整的圆圈。我尝试在层外使用一些变换，但那没有用。我认为问题出在图层属性之外，但我不确定从哪里开始。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "3/2/2020", "brand": "Hair", "mentions": 1463},
      {"date": "8/19/2020", "brand": "Fragrance", "mentions": 1912},
      {"date": "10/14/2020", "brand": "Fragrance", "mentions": 6804},
      {"date": "5/7/2020", "brand": "Makeup", "mentions": 4264},
      {"date": "5/7/2021", "brand": "Makeup", "mentions": 4264},
      {"date": "8/4/2021", "brand": "Fragrance", "mentions": 9007}
    ]
  },
  "encoding": {
    "theta": {
      "field": "mentions",
      "type": "quantitative",
      "stack": true,
      "aggregate": "sum"
    }
  },
  "layer": [
    {
      "mark": {"type": "arc", "radius2": 100, "radius": 140},
      "transform": [{"filter": {"field": "date", "timeUnit": "year", "equal": 2020}}],
      "encoding": {
        "color": {
          "field": "brand",
          "type": "nominal",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 120, "color": "white"},
      "transform": [{"filter": {"field": "date", "timeUnit": "year", "equal": 2020}}],
      "encoding": {
        "text": {
          "field": "mentions",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "detail": {"field": "brand", "type": "nominal"}
      }
    },
     {
      "mark": {"type": "arc", "radius2": 150, "radius": 190},
       "transform": [{"filter": {"field": "date", "timeUnit": "year", "equal": 2021}}],
      "encoding": {
        "color": {
          "field": "brand",
          "type": "nominal",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 170, "color": "white"},
      "transform": [{"filter": {"field": "date", "timeUnit": "year", "equal": 2021}}],
      "encoding": {
        "text": {
          "field": "mentions",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "detail": {"field": "brand", "type": "nominal"}
      }
    }
  ],
  "view": {"stroke": null}
}

Answer 1

为 theta 添加配置 resolve 似乎可以解决您的问题。它可能使用共享编码，因此可能导致计算错误。

下面是修改后的代码 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "3/2/2020", "brand": "Hair", "mentions": 1463},
      {"date": "8/19/2020", "brand": "Fragrance", "mentions": 1912},
      {"date": "10/14/2020", "brand": "Fragrance", "mentions": 6804},
      {"date": "5/7/2020", "brand": "Makeup", "mentions": 4264},
      {"date": "5/7/2021", "brand": "Makeup", "mentions": 4264},
      {"date": "8/4/2021", "brand": "Fragrance", "mentions": 9007}
    ]
  },
  "encoding": {
    "theta": {
      "field": "mentions",
      "type": "quantitative",
      "stack": true,
      "aggregate": "sum"
    }
  },
  "layer": [
    {
      "mark": {"type": "arc", "radius2": 100, "radius": 140},
      "transform": [
        {"filter": {"field": "date", "timeUnit": "year", "equal": 2020}}
      ],
      "encoding": {
        "color": {
          "field": "brand",
          "type": "nominal",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 120, "color": "white"},
      "transform": [
        {"filter": {"field": "date", "timeUnit": "year", "equal": 2020}}
      ],
      "encoding": {
        "text": {
          "field": "mentions",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "detail": {"field": "brand", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "arc", "radius2": 150, "radius": 190},
      "transform": [
        {"filter": {"field": "date", "timeUnit": "year", "equal": 2021}}
      ],
      "encoding": {
        "color": {
          "field": "brand",
          "type": "nominal",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 170, "color": "white"},
      "transform": [
        {"filter": {"field": "date", "timeUnit": "year", "equal": 2021}}
      ],
      "encoding": {
        "text": {
          "field": "mentions",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "detail": {"field": "brand", "type": "nominal"}
      }
    }
  ],
  "resolve": {"scale": {"theta": "independent"}},
  "view": {"stroke": null}
}

如果外部和内部圆环图的值不相同，如何使它们成为一个完整的圆圈？

How do I make the outer and inner donut charts a full circle if their value are not the same?

vega-lite

vega