具有次级y轴的Vega图

时间:2015-03-06 22:41:05

标签: vega

我正在尝试在Vega中创建一个带有辅助y轴的区域图。我正在构建编辑器中显示here的区域图示例。我在数据中添加了一个“col”字段,并使用facet转换将数据组织成以“col”为键的组。我已经为每个组添加了辅助轴和比例,但是我无法弄清楚在声明标记时如何将数据列映射到适当的比例。换句话说,我不知道如何在“enter”属性中使用“y”和“y2”,如果当前标记为col = A则使用比例“A”,如果当前标记为col,则使用比例“B” = B。这是我正在研究的vega对象:

{
  "width": 500,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 30},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1,  "y": 28, "col": "A"}, {"x": 2,  "y": 55, "col": "A"},
        {"x": 3,  "y": 43, "col": "A"}, {"x": 4,  "y": 91, "col": "A"},
        {"x": 5,  "y": 81, "col": "A"}, {"x": 6,  "y": 53, "col": "A"},
        {"x": 7,  "y": 19, "col": "A"}, {"x": 8,  "y": 87, "col": "A"},
        {"x": 9,  "y": 52, "col": "A"}, {"x": 10, "y": 48, "col": "A"},
        {"x": 11, "y": 24, "col": "A"}, {"x": 12, "y": 49, "col": "A"},
        {"x": 13, "y": 87, "col": "A"}, {"x": 14, "y": 66, "col": "A"},
        {"x": 15, "y": 17, "col": "A"}, {"x": 16, "y": 27, "col": "A"},
        {"x": 17, "y": 68, "col": "A"}, {"x": 18, "y": 16, "col": "A"},
        {"x": 19, "y": 49, "col": "A"}, {"x": 20, "y": 15, "col": "A"},
        {"x": 1,  "y": 26, "col": "B"}, {"x": 2,  "y": 59, "col": "B"},
        {"x": 3,  "y": 50, "col": "B"}, {"x": 4,  "y": 94, "col": "B"},
        {"x": 5,  "y": 83, "col": "B"}, {"x": 6,  "y": 50, "col": "B"},
        {"x": 7,  "y": 17, "col": "B"}, {"x": 8,  "y": 81, "col": "B"},
        {"x": 9,  "y": 48, "col": "B"}, {"x": 10, "y": 20, "col": "B"},
        {"x": 11, "y": 20, "col": "B"}, {"x": 12, "y": 80, "col": "B"},
        {"x": 13, "y": 90, "col": "B"}, {"x": 14, "y": 22, "col": "B"},
        {"x": 15, "y": 20, "col": "B"}, {"x": 16, "y": 19, "col": "B"},
        {"x": 17, "y": 2, "col": "B"}, {"x": 18, "y": 4, "col": "B"},
        {"x": 19, "y": 3, "col": "B"}, {"x": 20, "y": 1, "col": "B"}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "A",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.y"}
    },
    {
      "name": "B",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.y"}
    },
    {
      "name": "color", "type": "ordinal", "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x", "ticks": 20},
    {"type": "y", "scale": "A"},
    {"type": "y", "scale": "B", "orient":"right"}
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [{"type": "facet", "keys": ["data.col"]}]
      },
      "marks": [
        {
          "type": "area",
          "properties": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x", "field": "data.x"},
              "y": {"scale": "A", "field": "data.y"},
              "y2": {"scale": "A", "value": 0},
              "fill": {"scale": "color", "field": "data.col"}
            },
            "update": {
              "fillOpacity": {"value": 1}
            },
            "hover": {
              "fillOpacity": {"value": 0.5}
            }
          }
        }
      ]
    }
  ]
}

1 个答案:

答案 0 :(得分:2)

寻找相同的类似的答案我找到了你的问题。然后使用你的代码播放并注意到,你已经在数组“标记”中嵌套了另一个数组标记。然后我在interactive Vega editor中玩了一下并找到了以下解决方案:我没有使用cols“A”和“B”,而是定义了一个“z”(使用接近200的值)并使用了data.z作为比例“B”。然后在现有之后添加另一个标记数组,并且仅更改“y”的“字段”值。这至少似乎在交互式编辑器中起作用。

{
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1,  "y": 28}, {"x": 2,  "y": 55, "z" : 150},
        {"x": 3,  "y": 43}, {"x": 4,  "y": 91},
        {"x": 5,  "y": 81}, {"x": 6,  "y": 53},
        {"x": 7,  "y": 19}, {"x": 8,  "y": 87},
        {"x": 9,  "y": 52}, {"x": 10, "y": 48},
        {"x": 11, "y": 24}, {"x": 12, "y": 49},
        {"x": 13, "y": 87}, {"x": 14, "y": 66},
        {"x": 15, "y": 17}, {"x": 16, "y": 27},
        {"x": 17, "y": 68}, {"x": 18, "y": 16},
        {"x": 19, "y": 49}, {"x": 20, "y": 15}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "y",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.y"}
    },
{
      "name": "z",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.z"}
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"},
    {"type": "y", "scale": "z", "orient" : "right"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "width": {"scale": "x", "band": true, "offset": -2},
          "y": {"scale": "y", "field": "data.y"},
          "y2": {"scale": "y", "value": 0}

        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },
{
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "width": {"scale": "x", "band": true, "offset": -9},
          "y" : {"scale":"z", "field": "data.z"},

          "y2": {"scale": "y", "value": 0}

        },
        "update": {
          "fill": {"value": "green"}
        },
        "hover": {
          "fill": {"value": "orange"}
        }
      }
    }
  ]
}

非常感谢这个问题,今天我学到了很多东西。 :)