圆形打包：打包转换需要哪种形状的数据？答案

【问题标题】：Circle Packing: Which shape of data is needed for the pack transform?圆形打包：打包转换需要哪种形状的数据？
【发布时间】：2020-10-22 11:53:56
【问题描述】：

我尝试创建一个圆形包装图。我的数据已经是树形了。这是我尝试过的：

{
  "width": 932,
  "height": 932,
  "data": {
    "name": "tree",
    "values": {
      "name": "root",
      "children" : [
        {"name" : "leaf1", "value" : 100},
        {"name" : "branch",
        "children" : [
          {"name" : "leaf2", "value" : 200},
          {"name" : "leaf3", "value" : 300}
        ]}
      ]
    },
    "transform": [
      {
        "type": "pack",
        "field": "value",
        "size": [{"signal": "width"}, {"signal": "height"}]
      }
    ]
  },
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "tree", "field": "value"},
      "range": {"data": "tree", "field": "value"}
    }
  ]
}

导致错误[Error] w transform requires a backing tree data source. 感谢任何指针。

【问题讨论】：

标签： vega

【解决方案1】：

对应于 Vega 文档，Pack Transform

处理由一个特殊的树节点对象的集合上游嵌套或分层变换。

因此，我检查了 Vega repo 中的分层测试，这是生成的数据：

{
  data: {
    id: "a",
  },
  height: 2,
  depth: 0,
  parent: null,
  id: "a",
  children: [
    {
      data: {
        id: "b",
        pid: "a",
      },
      height: 0,
      depth: 1,
      parent: [Circular],
      id: "b",
    },
    {
      data: {
        id: "c",
        pid: "a",
      },
      height: 1,
      depth: 1,
      parent: [Circular],
      id: "c",
      children: [
        {
          data: {
            id: "d",
            pid: "c",
          },
          height: 0,
          depth: 2,
          parent: [Circular],
          id: "d",
        },
      ],
    },
  ],
  lookup: {
    a: [Circular],
    b: {
      data: {
        id: "b",
        pid: "a",
      },
      height: 0,
      depth: 1,
      parent: [Circular],
      id: "b",
    },
    c: {
      data: {
        id: "c",
        pid: "a",
      },
      height: 1,
      depth: 1,
      parent: [Circular],
      id: "c",
      children: [
        {
          data: {
            id: "d",
            pid: "c",
          },
          height: 0,
          depth: 2,
          parent: [Circular],
          id: "d",
        },
      ],
    },
    d: {
      data: {
        id: "d",
        pid: "c",
      },
      height: 0,
      depth: 2,
      parent: {
        data: {
          id: "c",
          pid: "a",
        },
        height: 1,
        depth: 1,
        parent: [Circular],
        id: "c",
        children: [
          [Circular],
        ],
      },
      id: "d",
    },
  },
}

【讨论】：