时间戳

首页 > 解决方案 > 分组标记的轴位置不正确

vega - 分组标记的轴位置不正确

问题描述

我想在一个标记内进行分组axes和组合，因为我希望条形图成为数据中的几个之一。但是，当我这样做时，x 轴从条形图的底部移动到顶部。这是一个例子：marksgroup

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "cars",
      "format": {
        "type": "json",
        "parse": {
          "year": "date"
        }
      },
      "url": "https://vega.github.io/vega-datasets/data/cars.json",
      "transform": [
        {
          "type": "aggregate",
          "groupby": [
            "Origin"
          ],
          "as": [
            "num_records"
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {
        "data": "cars",
        "field": "Origin"
      },
      "range": "width",
      "padding": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "cars",
        "field": "num_records"
      },
      "range": "height",
      "nice": true
    }
  ],
  "marks": [
    {
      "type": "group",
      "axes": [
        {
          "orient": "bottom",
          "scale": "x"
        },
        {
          "orient": "left",
          "scale": "y"
        }
      ],
      "marks": [
        {
          "type": "rect",
          "from": {
            "data": "cars"
          },
          "encode": {
            "enter": {
              "x": {
                "scale": "x",
                "field": "Origin"
              },
              "width": {
                "scale": "x",
                "band": 1
              },
              "y": {
                "scale": "y",
                "field": "num_records"
              },
              "y2": {
                "scale": "y",
                "value": 0
              }
            }
          }
        }
      ]
    }
  ]
}

Group Mark文档建议组支持这种嵌套的可视化规范。我究竟做错了什么？

标签： vega

解决方案

我做错的是没有编码组标记的宽度和高度。这是我修改后的示例：

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "cars",
      "format": {
        "type": "json",
        "parse": {
          "year": "date"
        }
      },
      "url": "https://vega.github.io/vega-datasets/data/cars.json",
      "transform": [
        {
          "type": "aggregate",
          "groupby": [
            "Origin"
          ],
          "as": [
            "num_records"
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {
        "data": "cars",
        "field": "Origin"
      },
      "range": "width",
      "padding": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "cars",
        "field": "num_records"
      },
      "range": "height",
      "nice": true
    }
  ],
  "marks": [
    {
      "type": "group",
      "axes": [
        {
          "orient": "bottom",
          "scale": "x"
        },
        {
          "orient": "left",
          "scale": "y"
        }
      ],
      "encode": {
        "enter": {
          "width": {
            "signal": "width"
          },
          "height": {
            "signal": "height"
          }
        }
      },
      "marks": [
        {
          "type": "rect",
          "from": {
            "data": "cars"
          },
          "encode": {
            "enter": {
              "x": {
                "scale": "x",
                "field": "Origin"
              },
              "width": {
                "scale": "x",
                "band": 1
              },
              "y": {
                "scale": "y",
                "field": "num_records"
              },
              "y2": {
                "scale": "y",
                "value": 0
              }
            }
          }
        }
      ]
    }
  ]
}

推荐阅读