问题
I'm attempting to create an area plot with a secondary y-axis in Vega. I'm building off of the area chart example shown here in the editor. I've added a "col" field to the data and am using the facet transform to organize the data into groups with "col" as the key. I've added the secondary axis and a scale for each group but I can't figure out how, when declaring the marks, to map the column of data to the appropriate scale. In other words, I don't know how to have "y" and "y2" in the "enter" property, use scale "A" if the current mark is col=A or scale "B" if the current mark is col=B. Here's the vega object I'm working on:
{
"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:
looking for the same a similar answer I found your question. Then used your code to play and noticed, that you have nested another array marks within your array "marks". Then I played around in the interactive Vega editor and found the following solution: instead of using cols "A" and "B" I defined a "z" (using a value closer to 200) and used data.z for the scale "B" . Then added another marks array after the existing and only changed the "field" value of "y". This at least appears to work in the interactive editor.
{
"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"}
}
}
}
]
}
Thanks a lot for the question, I learned quite a bit today. :)
来源：https://stackoverflow.com/questions/28908926/vega-plot-with-secondary-y-axis