vega-lite - 在 vegalite 中添加滚动条

Question

我正在绘制一个涉及许多数据集的水平堆叠条形图，并且想要添加一个垂直滚动条，因为一次显示所有内容并不节省空间。我在可观察的笔记本中使用 vegalite 绘制它。所以，我想知道如何在 vegalite 中包含滚动条？

Answer 1

您可以在 hconcat 中创建相同的条形图或简单的条形图，其中包含所有数据但带有selection interval params. 然后使用相同的参数名称来更改原始图表的比例。因此，最初所有数据都是可见的，但是当您在简单的条形图上执行选择时，它会产生条形图滚动的效果。

以下是示例代码或参考编辑器：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "hconcat": [
    {
      "height": 400,
      "width": 50,
      "mark": {"type": "bar", "fill": "lightgray"},
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["y"]}}
      ],
      "encoding": {
        "y": {"field": "date", "type": "temporal", "sort": "-x"},
        "x": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    },
    {
      "height": 400,
      "width": 480,
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "date",
          "type": "temporal",
          "scale": {"domain": {"param": "brush"}},
          "axis": {"title": ""}
        },
        "x": {"field": "price", "type": "quantitative"}
      }
    }
  ]
}

max-height通过向嵌入图表的 div提供和溢出滚动来添加基本滚动条的其他方法。以下是片段或参考小提琴：

var yourVlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://vega.github.io/editor/data/sp500.csv"},
  "hconcat": [
    {
      "height": 1400,
      "width": 300,
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "date",
          "type": "temporal",
          "axis": {"title": ""}
        },
        "x": {"field": "price", "type": "quantitative"}
      }
    }
  ]
}
vegaEmbed("#vis", yourVlSpec, {renderer: 'svg'}).then(res => {
    var view = res.view;
  //console.log(view.data('source_0'));
});

.vegaDiv{
  max-height: 300px;
  overflow: scroll;
}

 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script>
  
<div class="vegaDiv" id="vis"></div>