我正在尝试在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}
}
}
}
]
}
]
}
答案 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"}
}
}
}
]
}
非常感谢这个问题，今天我学到了很多东西。 ：）