如何在 vega-lite 中的直方图（来自分箱数据）上放置密度分布线

Question

在 Vega-lite 中，我创建了一个带有分箱数据的直方图，是否可以在其上放置一条密度线。从弹性数据库索引中获取数据。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.json",
  "data": {
    "url" : {
        "index": "artefact_data",
        "body": {
          "size":10000,
          "_source": ["bin_start", "bin_end", "count"]        
        }
      }  
      "format": {"property": "hits.hits"},
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "_source.bin_start",
      "bin": {"binned": true, "step": 2}
    },
    "x2": {"field": "_source.bin_end"},
    "y": {
      "field": "_source.count",
      "type": "quantitative"    
    },
    "color": {"value": "green"},
    "opacity": {"value": 0.6},
    "tooltip": [
      {"field": "_source.count", "type": "quantitative", "title":"Count"}
    ]
  }
}

情节看起来线

1. 我们能否在直方图上绘制一条密度线
2. X 轴仅在开始时显示值，其他值不显示或隐藏，如何显示轴值（即使在 45 度）

喜欢 示例数据看起来像 (https://vega.github.io/vega-lite/examples/bar_binned_data.html)

Answer 1

要获得密度线，您可以在mark 行中使用interpolate 配置并检查不同的选项。例如，在下面的示例中，我应用了natural interpolate。同样要显示所有标签点，首先您可以尝试在 x 轴的axis 配置中提供labelAngle，如果它可以正确显示您的标签，或者您可以通过提供labelOverlap 到false 来启用标签重叠。以下是示例配置或参考editor。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"bin_start": 8, "bin_end": 10, "count": 7},
      {"bin_start": 10, "bin_end": 12, "count": 29},
      {"bin_start": 12, "bin_end": 14, "count": 71},
      {"bin_start": 14, "bin_end": 16, "count": 127},
      {"bin_start": 16, "bin_end": 18, "count": 194},
      {"bin_start": 18, "bin_end": 20, "count": 54},
      {"bin_start": 20, "bin_end": 22, "count": 47},
      {"bin_start": 22, "bin_end": 24, "count": 35},
      {"bin_start": 24, "bin_end": 26, "count": 27}
    ]
  },
  "width": 600,
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "bin_start", "bin": {"binned": true, "step": 2}},
        "x2": {"field": "bin_end"},
        "y": {"field": "count", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "stroke": "green", "interpolate": "natural"},
      "encoding": {
        "x": {
          "field": "bin_start",
          "type": "quantitative",
          "bin": {"binned": true, "step": 2},
          "axis": {"labelAngle": 45, "labelOverlap": true}
        },
        "x2": {"field": "bin_end"},
        "y": {"field": "count", "type": "quantitative"}
      }
    }
  ]
}