问题
I have tested this: https://vega.github.io/editor/?#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAEySYUqUAwBOgtCrVJOmNlADWESlAjEQAXyXEocqGrQBtUJm1JZEAGZs2ggeoP40gphw2vqqmAwIlBAAnghMbIIAvNkA5ACSAEIAsjn2ALpKyNpm+sKycIogcLLOyjSyZGigAB5dIOFwgsqxag1KmMk4DehRCDhBSHoOIMl9A0P6ONo0UGMgE1P6AI4Mvph0ajSk9ssQg3BQ53J92uTs8pr7k9Mg7VHaxEWjSY7WG6GgizgEBuDi8Pj8gWCoX6EX+I3iiRSaQy2UyOQA4gB5Qn40p2CogKo1dB1PbNVrtTqfXqfdZggxRRoHH6zeY+JZKVasmiDdlbHZ7bnHU6yc7qc7XOy3e6Pd4vN7PT5S9B-aKAvRKEGydkQwRQmEU14yQTXT6m6Y9fQQGBIV7DJV2IA
But without success since the vertical axis is also linked. Is there also a way to limit wheel zoom to one axis only ?
回答1:
You can limit the scale binding to a single axis by specifying the "encodings"
property of the selection. For example, this binds the selection only to the x-axis (view in vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/stocks.csv"},
"vconcat": [
{
"transform": [{"filter": "datum.symbol==='IBM'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {
"region": {"type": "interval", "bind": "scales", "encodings": ["x"]}
}
},
{
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {
"region": {"type": "interval", "bind": "scales", "encodings": ["x"]}
}
}
],
"resolve": {"scale": {"x": "shared", "y": "independent"}}
}
If you want independent y scale binding in each chart, with a shared x-binding, you can do this by adding a new independent bound selection in each chart (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/stocks.csv"},
"vconcat": [
{
"transform": [{"filter": "datum.symbol==='IBM'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {
"y_scroll_1": {"type": "interval", "bind": "scales", "encodings": ["y"]},
"x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
}
},
{
"transform": [{"filter": "datum.symbol==='GOOG'"}],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"selection": {
"y_scroll_2": {"type": "interval", "bind": "scales", "encodings": ["y"]},
"x_scroll": {"type": "interval", "bind": "scales", "encodings": ["x"]}
}
}
],
"resolve": {"scale": {"x": "shared", "y": "independent"}}
}
来源:https://stackoverflow.com/questions/62458800/how-to-link-multiple-plots-with-vega-lite-only-on-horizontal-axis