0
358
ViewsVega-lite: gráfico de líneas. marca de línea de inicio desde la línea de dominio del eje y
Tengo un gráfico de líneas. Quería que las líneas comenzaran solo desde el eje y. Actualmente la línea está comenzando después de un descanso.
Este es el gráfico original:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json
Este es el gráfico en el que traté de obtener el cambio:
https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json
Este es el gráfico actual
Me gustaría cambiar esto para que las líneas comiencen solo desde el eje y. 
¿Cómo podría cambiar las líneas de la cuadrícula a la derecha para comenzar con la línea de dominio del eje y o hay una mejor manera de comenzar la línea desde la línea de dominio?
3 answers
Answer question0
Está utilizando un eje x discreto (bandas) en lugar de continuo. Yo haría algo como esto.
{ "$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}} } ] }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}} } ] }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}} } ] }