[英]Vega-lite: Line chart. start line mark from the y-axis domain line
I have a line graph.我有一个折线图。 I wanted the lines to start from the y-axis only.我希望线条仅从 y 轴开始。 Currently the line is starting after a break.目前,该线路在休息后开始。
This is the original graph:这是原始图表:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json
This is the chart in which I tried to get the change:这是我试图改变的图表:
https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json
This is the current chart这是当前图表
I would like to change this so the lines start from the y-axis only.我想更改它,使线条仅从 y 轴开始。
How could I shift the grid lines to the right to start with the y-axis domain line or is there a better way to start the line from the domain line.如何将网格线向右移动以从 y 轴域线开始,或者有更好的方法从域线开始线。
You are using discrete x-axis (bands) rather than continuous.您正在使用离散的 x 轴(波段)而不是连续的。 I would do something like this.我会做这样的事情。
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 10,
"pre_90": 15,
"pre_60": 30,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango"
},
{
"pre_120": 50,
"pre_90": 30,
"pre_60": 45,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"bandPosition": 0,
"axis":{ "bandPosition":0, "labelOffset":-55},
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
],
"scale": {
"domain": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": "0", "bandPosition": 0}}
}
]
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120]}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120],
"labelExpr": "abs(datum.value)"}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.