Vega 多线图因移动拉丝区域而变得混乱，但可用于折叠

Question

概览图下方有一个温度值折线图。 概览图表被刷以选择温度图表中显示的内容。

每行都有自己的标记：

marks: [
  { "type": "line", ... max temperature
  { "type": "line", ... avg temperature
  { "type": "line", ... min temperature
]

问题是，如果我将刷过的区域向右移动，然后向左移动，似乎会改变数据点的顺序：

数据在画笔上进行过滤，然后使用收集>排序进行转换 - 它在数据窗格中看起来排序正确。 我发现将刷过的区域移动到右侧是可行的，但随后将其向相反方向移动会产生此问题。

如果我将系列折叠到键|值列中，它就可以正常工作并且不会出现此问题！

但是，如果可能的话，我想将标记分开，因为折叠会引入一些与标题和轴变粗有关的额外问题（可能是因为它们在每次折叠时都重叠）。

Answer 1

在顶层添加排序：

https://vega.github.io/vega/docs/marks/

例如添加或删除排序会更改此处线上点的连接顺序：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "background": "white",
  "padding": 5,
  "width": 200,
  "height": 200,
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "url": "data/driving.json",
      "format": {"type": "json", "parse": {"miles": "number"}}
    }
  ],
  "marks": [
    {
      "name": "layer_0_marks",
      "type": "line",
      "sort": {"field": "x"},
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "stroke": {"value": "#4c78a8"},
          "x": {"scale": "x", "field": "miles"},
          "y": {"scale": "y", "field": "gas"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"fields": [{"data": "source_0", "field": "miles"}]},
      "range": [0, {"signal": "width"}],
      "zero": false,
      "nice": true
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"fields": [{"data": "source_0", "field": "gas"}]},
      "range": [{"signal": "height"}, 0],
      "zero": false,
      "nice": true
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "gridScale": "y",
      "grid": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "miles",
      "labelFlush": true,
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "gas",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ]
}