英文:
How can I define duplicate values on the X-axis of a stacked area chart with Vega?
问题
以下是您提供的内容的翻译：
在堆叠区域图中，是否有一种方式可以定义X轴上的重复值？
我试图创建一个图表，其X轴从50下降到0，然后再上升到30，如下所示：
50、40、30、20、10、0、5、10、15、20
我遇到的问题是重复值没有显示出来，所以我得到了以下结果：
50、40、30、20、10、0、5、15
我尝试添加分组以区分重复项。是否有任何想法/建议将不胜感激。
（接下来是代码部分，不需要翻译。）
英文:
Is there anyway to define duplicate values on an X-axis in a stacked area chart?
I'm trying to create a chart that has an X Axis from 50 down to 0 and back up to 30, like:
50, 40, 30, 20, 10, 0, 5, 10, 15, 20
I'm having issues where the duplicate values are not showing up, so I get:
50, 40, 30, 20, 10, 0, 5, 15
I tried adding a groupby to distinguish the duplicates. Any thoughts/suggestions would be greatly appreciated.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked area chart example.",
"width": 450,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"x": "50", "x2": 0, "y": 20, "c":0, "color":"#aaa"}, {"x": "50", "x2": 0, "y": 20, "c":1, "color":"#000"},
{"x": "40", "x2": 1, "y": 40, "c":0, "color":"#aaa"}, {"x": "40", "x2": 1, "y": 40, "c":1, "color":"#000"},
{"x": "30", "x2": 2, "y": 70, "c":0, "color":"#aaa"}, {"x": "30", "x2": 2, "y": 70, "c":1, "color":"#000"},
{"x": "20", "x2": 3, "y": 80, "c":0, "color":"#aaa"}, {"x": "20", "x2": 3, "y": 80, "c":1, "color":"#000"},
{"x": "10", "x2": 4, "y": 50, "c":0, "color":"#aaa"}, {"x": "10", "x2": 4, "y": 50, "c":1, "color":"#000"},
{"x": "0", "x2": 5, "y": 50, "c":0, "color":"#aaa"}, {"x": "0", "x2": 5, "y": 50, "c":1, "color":"#000"},
{"x": "5", "x2": 6, "y": 10, "c":0, "color":"#aaa"}, {"x": "5", "x2": 6, "y": 10, "c":1, "color":"#000"},
{"x": "10", "x2": 7, "y": 50, "c":0, "color":"#aaa"}, {"x": "10", "x2": 7, "y": 20, "c":1, "color":"#000"},
{"x": "20", "x2": 8, "y": 80, "c":0, "color":"#aaa"}, {"x": "20", "x2": 8, "y": 80, "c":1, "color":"#000"},
{"x": "30", "x2": 9, "y": 20, "c":0, "color":"#aaa"}, {"x": "30", "x2": 9, "y": 20, "c":1, "color":"#000"}],
"transform": [
{
"type": "stack",
"groupby": ["x2"],
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "x2",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x2"}
},
{
"name": "y",
"type": "linear",
"domain": [0,100],
"range": [{"signal": "height"}, 0],
"round": true,
"zero": true,
"nice": false,
"bins": {"step": 20}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "c"
}
},
"marks": [
{
"type": "area",
"from": {"data": "series"},
"encode": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "x2", "field": "x2"},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"signal": "datum.color"}
}
}
}
]
}
]
}
答案1
得分: 1
这是一种方法。在应该出现在左侧的数字前添加负号，然后在坐标轴上删除它们。
英文:
Here's one way. Add negative signs to the numbers that are supposed to appear on the left and then remove them in the axis.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic stacked area chart example.",
"width": 450,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"x": "-50", "x2": 0, "y": 20, "c": 0, "color": "#aaa"},
{"x": "-50", "x2": 0, "y": 20, "c": 1, "color": "#000"},
{"x": "-40", "x2": 1, "y": 40, "c": 0, "color": "#aaa"},
{"x": "-40", "x2": 1, "y": 40, "c": 1, "color": "#000"},
{"x": "-30", "x2": 2, "y": 70, "c": 0, "color": "#aaa"},
{"x": "-30", "x2": 2, "y": 70, "c": 1, "color": "#000"},
{"x": "-20", "x2": 3, "y": 80, "c": 0, "color": "#aaa"},
{"x": "-20", "x2": 3, "y": 80, "c": 1, "color": "#000"},
{"x": "-10", "x2": 4, "y": 50, "c": 0, "color": "#aaa"},
{"x": "-10", "x2": 4, "y": 50, "c": 1, "color": "#000"},
{"x": "0", "x2": 5, "y": 50, "c": 0, "color": "#aaa"},
{"x": "0", "x2": 5, "y": 50, "c": 1, "color": "#000"},
{"x": "5", "x2": 6, "y": 10, "c": 0, "color": "#aaa"},
{"x": "5", "x2": 6, "y": 10, "c": 1, "color": "#000"},
{"x": "10", "x2": 7, "y": 50, "c": 0, "color": "#aaa"},
{"x": "10", "x2": 7, "y": 20, "c": 1, "color": "#000"},
{"x": "20", "x2": 8, "y": 80, "c": 0, "color": "#aaa"},
{"x": "20", "x2": 8, "y": 80, "c": 1, "color": "#000"},
{"x": "30", "x2": 9, "y": 20, "c": 0, "color": "#aaa"},
{"x": "30", "x2": 9, "y": 20, "c": 1, "color": "#000"}
],
"transform": [{"type": "stack", "groupby": ["x2"], "field": "y"}]
}
],
"scales": [
{
"name": "x",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "x2",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x2"}
},
{
"name": "y",
"type": "linear",
"domain": [0, 100],
"range": [{"signal": "height"}, 0],
"round": true,
"zero": true,
"nice": false,
"bins": {"step": 20}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1,
"encode": {
"labels": {
"update": {
"text": {"signal": "substring(datum.label,0,1) =='-'?substring(datum.label,1):datum.label"}
}
}
}
},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {"facet": {"name": "series", "data": "table", "groupby": "c"}},
"marks": [
{
"type": "area",
"from": {"data": "series"},
"encode": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "x2", "field": "x2"},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"signal": "datum.color"}
}
}
}
]
}
]
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论