条形之间的 Vega-lite 条形图空间

【问题标题】：Vega-lite bar chart space between bars条形之间的 Vega-lite 条形图空间
【发布时间】：2017-07-26 12:05:53
【问题描述】：

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"
      }
    }
  }
}

【问题讨论】：

标签： d3.js bar-chart vega vega-lite

【解决方案1】：

我能理解你的困惑。好像有三个问题：

如何更改直方图的 bin 宽度？ 这已记录在 here。如果您对可重现的示例有疑问，我很乐意提供帮助。
如何调整条的间距？ 这由padding、paddingInner 和paddingOuter 控制，所有这些都记录在encoding level 和config level 中。您可能会遇到麻烦，因为您使用"size": {"value": 40} 手动设置大小，但我猜这是实验的残余。这是来自 gist 的工作规范。您可以使用paddingOuter、paddingInner，或添加padding 以适用于内部和外部。
如何更改字体样式？请参阅gist。

【讨论】：