我如何在双轴图表 vegaLite 中对齐网格线

Question

我正在尝试在 vegaLite 中创建双轴图表，当我使两层的网格都为 true 时，y 轴的网格线未对齐，我想要均匀对齐并提供更好的可视化。进行分析。 编辑链接

有关 matplotlib 中更多说明的参考链接

Answer 1

您可以手动设置域名。不过你必须自己计算这些。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`",
  "width": 400,
  "height": 300,
  "data": {"url": "data/weather.csv"},
  "transform": [{"filter": "datum.location == \"Seattle\""}],
  "encoding": {
    "x": {
      "timeUnit": "month",
      "field": "date",
      "axis": {"format": "%b", "title": null}
    }
  },
  "layer": [
    {
      "mark": {"opacity": 0.3, "type": "area", "color": "#85C5A6"},
      "encoding": {
        "y": {
          "aggregate": "average",
          "field": "temp_max",
          "scale": {"domain": [0, 30]},
          "title": "Avg. Temperature (°C)",
          "axis": {"titleColor": "#85C5A6", "grid": true}
        },
        "y2": {"aggregate": "average", "field": "temp_min"}
      }
    },
    {
      "mark": {"stroke": "#85A9C5", "type": "line", "interpolate": "monotone"},
      "encoding": {
        "y": {
          "aggregate": "average",
          "field": "precipitation",
          "title": "Precipitation (inches)",
          "axis": {"titleColor": "#85A9C5", "grid": true}, "scale":{"domain":[0,6]}
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}