Vega.js - 有没有办法将自动调整应用于各个组?

时间:2018-01-03 21:27:04

标签: charts vega

我正在使用Vega 3.x -

有没有办法将自动调整大小属性应用于单个组?看一下下面的例子:

   {
      "$schema": "https://vega.github.io/schema/vega/v3.0.json",
      "width": 500,
      "height": 300,
      "data": [
        {
          "name": "table",
          "values": [
            {"category":"Long Cagtegory A", "position":0, "value":0.1},
            {"category":"Long Cagtegory A", "position":1, "value":0.6},
            {"category":"Extra Super Long Cagtegory B", "position":0, "value":0.7},
            {"category":"Extra Super Long Cagtegory B", "position":1, "value":0.2}
          ]
        }
      ],

      "scales": [
        {
          "name": "yscale",
          "type": "band",
          "domain": {"data": "table", "field": "category"},
          "range": "height",
          "padding": 0.2
        },
        {
          "name": "xscale",
          "type": "linear",
          "domain": {"data": "table", "field": "value"},
          "range": "width",
          "round": true,
          "zero": true,
          "nice": true
        },
        {
          "name": "color",
          "type": "ordinal",
          "domain": {"data": "table", "field": "position"},
          "range": {"scheme": "category20"}
        }
      ],
      "axes": [
        {"orient": "left", "scale": "yscale", "tickSize": 0, "labelPadding": 4, "zindex": 1},
        {"orient": "bottom", "scale": "xscale"}
      ],
      "marks": [
        {
          "type": "text",
          "encode": {
            "enter": {
              "text": {
                "value": "Lorem Ipsum"
              },
              "fontSize": {
                "value": 20
              }
            }
          }
        },
        {
          "type": "group",

          "from": {
            "facet": {
              "data": "table",
              "name": "facet",
              "groupby": "category"
            }
          },

          "encode": {
            "enter": {
              "y": {"scale": "yscale", "field": "category"}
            }
          },

          "signals": [
            {"name": "height", "update": "bandwidth('yscale')"}
          ],

          "scales": [
            {
              "name": "pos",
              "type": "band",
              "range": "height",
              "domain": {"data": "facet", "field": "position"}
            }
          ],

          "marks": [
            {
              "name": "bars",
              "from": {"data": "facet"},
              "type": "rect",
              "encode": {
                "enter": {
                  "y": {"scale": "pos", "field": "position"},
                  "height": {"scale": "pos", "band": 1},
                  "x": {"scale": "xscale", "field": "value"},
                  "x2": {"scale": "xscale", "value": 0},
                  "fill": {"scale": "color", "field": "position"}
                }
              }
            },
            {
              "type": "text",
              "from": {"data": "bars"},
              "encode": {
                "enter": {
                  "x": {"field": "x2", "offset": -5},
                  "y": {"field": "y", "offset": {"field": "height", "mult": 0.5}},
                  "fill": {"value": "white"},
                  "align": {"value": "right"},
                  "baseline": {"value": "middle"},
                  "text": {"field": "datum.value"}
                }
              }
            }
          ]
        }
      ]
    }

这会产生类似的结果:

enter image description here

我需要将“Lorem Ipsum”文本推到左侧,而不是与轴右侧的图表区域对齐。我理解有一个title属性,但我不能使用它,因为我有更复杂的标记需要在标题部分,为了简洁,我没有在这里显示。

我也尝试将轴属性放在包装器组中作为Lorem Ipsum文本标记组的兄弟,但这似乎也没有帮助。

0 个答案:

没有答案