Vega-lite 条形图 space 条之间
Vega-lite bar chart space between bars
D3新手。
如何调整 vega-lite 条形图中条形之间的间距并覆盖默认值? binSpacing 我认为只适用于直方图。请参阅下面的代码。
我也想调整文本和字体系列的颜色...但是我在文档中找不到它。
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
我能理解你的困惑。好像有3个问题:
- 如何更改直方图的 bin 宽度? 这已记录在案 here。如果您对可重现的示例有疑问,我很乐意提供帮助。
- 如何调整条的间距? 这由
padding
、paddingInner
和 paddingOuter
控制,所有记录在encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}
, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist。您可以使用 paddingOuter
、paddingInner
或添加 padding
以同时应用于内部和外部。
- 如何更改字体样式? 请参阅此 gist。
D3新手。 如何调整 vega-lite 条形图中条形之间的间距并覆盖默认值? binSpacing 我认为只适用于直方图。请参阅下面的代码。 我也想调整文本和字体系列的颜色...但是我在文档中找不到它。
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
我能理解你的困惑。好像有3个问题:
- 如何更改直方图的 bin 宽度? 这已记录在案 here。如果您对可重现的示例有疑问,我很乐意提供帮助。
- 如何调整条的间距? 这由
padding
、paddingInner
和paddingOuter
控制,所有记录在encoding level and at the config level. You might be having trouble since you are setting size manually with"size": {"value": 40}
, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist。您可以使用paddingOuter
、paddingInner
或添加padding
以同时应用于内部和外部。 - 如何更改字体样式? 请参阅此 gist。