条之间的Vega-lite条形图空间 [英] Vega-lite bar chart space between bars

问题描述

D3新手. 如何调整Vega-lite条形图中条形之间的间距并覆盖默认值?我认为binSpacing仅适用于直方图.请参阅下面的代码. 我也想调整文本和字体系列的颜色...但是在文档中找不到它.

D3 newbie. How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below. I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.

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

推荐答案

我能理解您的困惑.似乎有三个问题:

I can understand your confusion. It seems there are three questions:

1. 如何更改直方图的bin宽度? 手动设置大小的，但是我想这是实验的残余.这是来自 gist 的工作规范.您可以玩paddingOuter，paddingInner或添加padding应用于内部和外部.
2. 如何更改字体样式?请参见此要点

1. How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
2. How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the 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. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
3. How do I change font styling? See this gist.

这篇关于条之间的Vega-lite条形图空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！