Vega Lite：滚动重置更改 X 轴的原始顺序

Question

这里是 Vega-lite 编辑器规范的链接：

Vega Lite 编辑器

我的问题是，当我从滚动条中的任意位置选择数据子集，然后双击停止时，x 轴值从子集的第一个元素开始

原图：

选择的子集：

图表或取消选择（即双击）：

我尝试添加

排序：空，

排序：{“字段”：“id”}，

排序：假，

完全删除“排序”，

在所有编码中保持排序，即所有 x 和 y 对象，

仅在 x 编码中保持排序，而不是 y 编码。

但是，没有任何方法可以解决此重置问题。

此问题不会显示在带有滚动条的简单条形图中。

Answer 1

您需要正确的数据类型。这可行，您可以使用 d3 语法将格式更改为您喜欢的格式。

{
  "config": {
    "encoding": {"sort": false},
    "legend": {
      "layout": {"bottom": {"anchor": "middle"}, "top": {"anchor": "middle"}}
    }
  },
  "data": {
    "values": [
      {"datex": "04-Jul-14", "hoursy": 62},
      {"datex": "08-Dec-14", "hoursy": 6708},
      {"datex": "14-Jun-16", "hoursy": 115},
      {"datex": "14-Jun-16", "hoursy": 2500},
      {"datex": "06-Nov-17", "hoursy": 0},
      {"datex": "17-Nov-17", "hoursy": 3903},
      {"datex": "19-Nov-17", "hoursy": 85370},
      {"datex": "23-Feb-18", "hoursy": 0},
      {"datex": "23-Feb-18", "hoursy": 0},
      {"datex": "01-Jun-18", "hoursy": 0},
      {"datex": "01-Oct-18", "hoursy": 3},
      {"datex": "15-May-19", "hoursy": 4202},
      {"datex": "15-May-19", "hoursy": 20122},
      {"datex": "29-May-19", "hoursy": 2648},
      {"datex": "11-Sep-19", "hoursy": 86145},
      {"datex": "05-Dec-19", "hoursy": 1291},
      {"datex": "16-Dec-19", "hoursy": 20049},
      {"datex": "17-Oct-21", "hoursy": 93839},
      {"datex": "08-Jun-23", "hoursy": 96879},
      {"datex": "08-Jun-23", "hoursy": 96879},
      {"datex": "24-Jun-23", "hoursy": 19051},
      {"datex": "29-Jun-14", "hoursy": 72770}
    ]
  },
  "params": [
    {"name": "LegendColumn", "value": 4},
    {"name": "YAxisTitleX", "value": -40},
    {"name": "LegendOrient", "value": "top"},
    {"name": "LegendLabelBaseline", "value": "middle"},
    {"name": "LegendLabelColor", "value": "#000000"},
    {"name": "LegendLabelFontSize", "value": 13},
    {"name": "LegendLabellimit", "value": 0},
    {"name": "LegendLabelOffset", "value": 5},
    {"name": "LegendLabelOpicity", "value": 1},
    {"name": "LegendSymbolOpicity", "value": 1},
    {"name": "LegendSymbolSize", "value": 200},
    {"name": "LegendSymbol", "value": "circle"},
    {"name": "XAxisLabelAngle", "value": -45},
    {"name": "XAxisTitle", "value": "Date"},
    {"name": "TitleAlign", "value": "center"},
    {"name": "XAxisTitleAngle", "value": 0},
    {"name": "TitleAnchor", "value": "middle"},
    {"name": "XAxisPostion", "value": 1},
    {"name": "XAxisLabelSize", "value": 13},
    {"name": "XAxisTickSize", "value": 5},
    {"name": "XAxisLabelLimit", "value": 0},
    {"name": "XAxisLabelColor", "value": "black"},
    {"name": "XAxisTitleColor", "value": "black"},
    {"name": "XAxisTitleFontSize", "value": 16},
    {"name": "TitleLimit", "value": 0},
    {"name": "TitleOffset", "value": 0},
    {"name": "TitleFontColor", "value": "black"},
    {"name": "TitleFontSize", "value": 16},
    {"name": "TitleBaseline", "value": "center"},
    {"name": "TitleText", "value": "Chart"},
    {"name": "YAxisPostion", "value": 0},
    {"name": "YAxisTickSize", "value": 2},
    {"name": "YAxisLabelLimit", "value": 0},
    {"name": "YAxisLabelColor", "value": "black"},
    {"name": "YAxisLabelSize", "value": 13},
    {"name": "YAxisTitleColor", "value": "black"},
    {"name": "YAxisTitleFontSize", "value": 16},
    {"name": "YAxisTitle", "value": "Hours"},
    {"name": "YAxisLabelAngle", "value": -45},
    {"name": "TitleDx", "value": 0},
    {"name": "Subtitle", "value": ""},
    {"name": "SubTitileColor", "value": "green"},
    {"name": "SubtitleFont", "value": "bold"},
    {"name": "SubtitleFontSize", "value": 16},
    {"name": "PointAngle", "value": 12},
    {"name": "PointColor", "value": "#18FE23"},
    {"name": "PointSize", "value": 100},
    {"name": "PointStrokeWidth", "value": 10},
    {"name": "YAxisTitleAngle", "value": 270}
  ],
  "title": {
    "align": {"expr": "TitleAlign"},
    "anchor": {"expr": "TitleAnchor"},
    "baseline": {"expr": "TitleBaseline"},
    "color": {"expr": "TitleFontColor"},
    "dx": {"expr": "TitleDx"},
    "fontSize": {"expr": "TitleFontSize"},
    "limit": {"expr": "TitleLimit"},
    "offset": {"expr": "TitleOffset"},
    "subtitle": {"expr": "Subtitle"},
    "subtitleColor": {"expr": "SubTitileColor"},
    "subtitleFont": {"expr": "SubtitleFont"},
    "subtitleFontSize": {"expr": "SubtitleFontSize"},
    "text": {"expr": "TitleText"}
  },
  "vconcat": [
    {
      "encoding": {
        "x": {
          "axis": {
            "labelAngle": {"expr": "XAxisLabelAngle"},
            "labelColor": {"expr": "XAxisLabelColor"},
            "labelFontSize": {"expr": "XAxisLabelSize"},
            "labelLimit": {"expr": "XAxisLabelLimit"},
            "position": {"expr": "XAxisPostion"},
            "tickSize": {"expr": "XAxisTickSize"},
            "title": {"expr": "XAxisTitle"},
            "titleAngle": {"expr": "XAxisTitleAngle"},
            "titleColor": {"expr": "XAxisTitleColor"},
            "titleFontSize": {"expr": "XAxisTitleFontSize"},
            "format": "%d/%m/%y",
            "formatType": "time"
          },
          "field": "datex",
          "timeUnit": "yearmonthdate",
          "type": "temporal"
        }
      },
      "height": 250,
      "layer": [
        {
          "encoding": {
            "color": {
              "datum": "Actual Hours",
              "legend": {
                "columns": {"expr": "LegendColumn"},
                "labelBaseline": {"expr": "LegendLabelBaseline"},
                "labelColor": {"expr": "LegendLabelColor"},
                "labelFontSize": {"expr": "LegendLabelFontSize"},
                "labelLimit": {"expr": "LegendLabellimit"},
                "labelOffset": {"expr": "LegendLabelOffset"},
                "labelOpacity": {"expr": "LegendLabelOpicity"},
                "orient": {"expr": "LegendOrient"},
                "symbolOpacity": {"expr": "LegendSymbolOpicity"},
                "symbolSize": {"expr": "LegendSymbolSize"},
                "symbolType": {"expr": "LegendSymbol"},
                "title": ""
              },
              "scale": {"range": [{"expr": "PointColor"}]}
            },
            "y": {
              "anchor": "middle",
              "axis": {
                "grid": true,
                "labelAngle": {"expr": "YAxisLabelAngle"},
                "labelColor": {"expr": "YAxisLabelColor"},
                "labelFontSize": {"expr": "YAxisLabelSize"},
                "titleX": {"expr": "YAxisTitleX"},
                "labelLimit": {"expr": "YAxisLabelLimit"},
                "orient": "left",
                "position": {"expr": "YAxisPostion"},
                "tickSize": {"expr": "YAxisTickSize"},
                "title": {"expr": "YAxisTitle"},
                "titleAngle": {"expr": "YAxisTitleAngle"},
                "titleColor": {"expr": "YAxisTitleColor"},
                "titleFontSize": {"expr": "YAxisTitleFontSize"}
              },
              "field": "hoursy",
              "scale": {"zero": false},
              "title": "Hours",
              "type": "quantitative",
              "sort": false
            }
          },
          "mark": {
            "angle": {"expr": "PointAngle"},
            "filled": true,
            "size": {"expr": "PointSize"},
            "strokeWidth": {"expr": "PointStrokeWidth"},
            "tooltip": true,
            "type": "point"
          },
          "params": [
            {"name": "brush0", "select": {"encodings": ["x"], "type": "point"}}
          ]
        }
      ],
      "resolve": {"scale": {"color": "independent", "y": "independent"}},
      "transform": [{"filter": {"param": "brush"}}],
      "width": "container"
    },
    {
      "encoding": {
        "color": {"value": "lightGray"},
        "x": {
          "axis": {"labels": false, "ticks": false, "title": ""},
          "field": "datex",
          "sort": false,
          "type": "nominal"
        }
      },
      "height": 30,
      "mark": {"type": "area"},
      "params": [
        {
          "name": "brush",
          "select": {
            "clear": true,
            "encodings": ["x"],
            "type": "interval",
            "zoom": false
          }
        }
      ],
      "resolve": {"scale": {"color": "independent", "shape": "independent"}},
      "view": {"fillOpacity": "1"},
      "width": "container"
    }
  ]
}