1

我正在尝试在 Vega 中创建一个带有辅助 y 轴的区域图。我正在构建编辑器中显示的面积图示例。我在数据中添加了一个“col”字段，并使用构面转换将数据组织成以“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}
            }
          }
        }
      ]
    }
  ]
}
4

1 回答 1

2

寻找相同的类似答案，我发现了您的问题。然后使用您的代码播放并注意到您在数组“标记”中嵌套了另一个数组标记。然后我在交互式 Vega 编辑器中玩耍并找到了以下解决方案：我定义了一个“z”（使用接近 200 的值）而不是使用 cols “A”和“B”，并使用 data.z 作为比例“B” ” 。然后在现有的之后添加另一个标记数组，并且只更改了“y”的“field”值。这至少在交互式编辑器中似乎有效。

{
  "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"}
        }
      }
    }
  ]
}

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

于 2015-07-07T23:05:56.760 回答