如何使用单个数据集的饼图变换在 Vega 中创建分组（单独）饼图？

Question

我想使用小饼作为节点创建一个网络（图）图。但是，我无法找出生成用于节点的各个饼图的正确方法。

我有一个包含所有值的数据集，本质上想在计算“饼”变换（link）之前应用“groupby”操作，然后使用“detail”将饼分成各自的元素，但是变换和标记似乎不直接支持这两个选项。相反，饼图变换似乎是根据所有底层数据来计算布局的。

考虑这个基于基本 Vega 饼图的简单示例（链接到在线 Vega 编辑器）：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic pie chart example.",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4, "group": 1},
        {"id": 2, "field": 6, "group": 1},
        {"id": 3, "field": 10, "group": 1},
        {"id": 4, "field": 3, "group": 2},
        {"id": 5, "field": 7, "group": 2},
        {"id": 6, "field": 8, "group": 2}
      ],
      "transform": [{"type": "pie", "field": "field"}]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "fill": {"scale": "color", "field": "id"},
          "outerRadius": {"value": 50},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "opacity": {"value": 0.8}
        }
      }
    }
  ]
}

在此示例中，我想使用

group

字段创建两个单独的饼图（每个饼图包含三个切片），但无法弄清楚此操作应在规范中的何处发生。一旦我有了单独的饼图，通过更新它们的

x

和

y

值，在网络布局中使用它们应该很简单（所以为了简单起见，我排除了本示例的这一部分）。

Answer 1

这是你想要的吗？

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic pie chart example.",
  "width": 200,
  "height": 300,
  "autosize": "pad",
  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4, "group": 1},
        {"id": 2, "field": 6, "group": 1},
        {"id": 3, "field": 10, "group": 1},
        {"id": 4, "field": 3, "group": 2},
        {"id": 5, "field": 7, "group": 2},
        {"id": 6, "field": 8, "group": 2}
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    },
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table", "field": "group"},
      "range": "height",
      "padding": 0
    }
  ],
  "marks": [
    {
      "type": "group",
      "name": "f",
      "from": {"facet": {"data": "table", "name": "facet", "groupby": "group"}},
      "encode": {"update": {"y": {"scale": "yscale", "field": "group"}}},
      "marks": [
        {
          "type": "arc",
          "from": {"data": "facet"},
          "transform": [{"type": "pie", "field": "datum.field"}],
          "encode": {
            "enter": {
              "startAngle": {"field": "startAngle"},
              "endAngle": {"field": "endAngle"},
              "fill": {"scale": "color", "field": "id"},
              "outerRadius": {"value": 50},
              "x": {"signal": "width / 2"},
              "y": {"signal": "height / 2"},
              "opacity": {"value": 0.8}
            }
          }
        }
      ]
    }
  ]
}

Answer 2

更新：Davide 的解决方案比这个更直接。此操作创建数据集并将转换作为

data

属性的一部分应用，这对于需要多个数据集的组非常有用。 Davide 的版本将变换计算为标记规范的一部分，这更加简洁。

我根据“日历”示例（

link

）的结构找到了在group（link）标记上使用facet操作的解决方案。

这是生成的规范（链接到在线 Vega 编辑器），它首先根据

group

字段计算一个构面，然后使用

pie

变换计算一个新数据集，然后可以在标记中适当使用.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic pie chart example.",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4, "group": 1},
        {"id": 2, "field": 6, "group": 1},
        {"id": 3, "field": 10, "group": 1},
        {"id": 4, "field": 3, "group": 2},
        {"id": 5, "field": 7, "group": 2},
        {"id": 6, "field": 8, "group": 2}
      ]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "values",
          "data": "table",
          "groupby": "group"
        }
      },
      "data": [
        {
          "name": "pie",
          "source": "values",
          "transform": [
            {"type": "pie", "field": "field"},
            {"type": "formula", "expr": "datum.group * 50", "as": "xOffset"}
          ]
        }
      ],
      "marks": [
        {
          "type": "arc",
          "from": {"data": "pie"},
          "encode": {
            "enter": {
              "startAngle": {"field": "startAngle"},
              "endAngle": {"field": "endAngle"},
              "fill": {"scale": "color", "field": "id"},
              "outerRadius": {"value": 50},
              "x": {"field": "xOffset"},
              "y": {"signal": "height / 2"},
              "opacity": {"value": 0.5}
            }
          }
        }
      ]
    }
  ]
}

此代码生成以下结果：