VEGA - 面积图 - 奇怪的数据点行为

问题描述

有人知道为什么我的数据点在某些位置会扭曲吗? (图 1)

我在 Vega-Lite 中使用相同的数据集,它在那里工作。但是在 Vega 中,我错过了一些东西。
也许有人可以在这方面帮助我,这将是最受欢迎的 :)

数据样本:

{
    "score" : 18,"time_out" : false

    
    "hits" : {
        "total" : {
            "value" : 0123,"relation" : "eq"
        },"max_score" : 1.8,"hits" : [
            {
                "_index" : "dataIndex","_type" : "log","_source" :{
                    "@timestamp" : "2017-01-13345:00:16.0301135Z"
                    "numericValue" : 2.0
                }
            },{
                "_index" : "dataIndex","_source" :{
                    "@timestamp" : "2017-02-20345:10:16.0301135Z"
                    "numericValue" : 3.0
                }
            }
        ]
    }
}

图一

enter image description here

Vega 中的示例 - 一切都按预期进行,除了某些点偏斜

{
  $schema: https://vega.github.io/schema/vega/v5.json
  data: [
    {
      name: table
      url: {
        %context%: true
        %timefield%: @timestamp
        index: dataIndex-*
        body: {
          size: 1000
          aggs: {
            hits: {
              date_histogram: {
                field: @timestamp
                fixed_interval: 10m
                extended_bounds: {
                  min: { %timefilter%: min}
                  max: { %timefilter%: max}
                }
              }
            }
          }
        }
      }
      format: {
        property: hits.hits
      }
      transform: [
        {
          type: formula
          as: varTime
          expr: toDate(datum._source['@timestamp'])
        }
        {
          type: filter
          expr: datum._source['@timestamp'] != null && datum._source['numericValue'] > 0
        }
      ]
    }
  ]
  scales: [
    {
      name: xscale
      type: time
      range: width
      domain: {
        data: table
        field: varTime
      }
    }
    {
      name: yscale
      type: linear
      range: height
      domain: {
        data: table
        field: _source.numericValue
      }
    }
  ]
  axes: [
    {
      orient: bottom
      scale: xscale
      format: %H:%M
    }
    {
      orient: left
      scale: yscale
    }
  ]
  marks: [
    {
      type: area
      from: {
        data: table
      }
      encode: {
        enter: {
          x: {
            scale: xscale
            field: varTime
          }
          y: {
            scale: yscale
            field: _source.numericValue
          }
          y2: {
            scale: yscale
            value: 0
          }
          fill: {
            value: steelblue
          }
        }
        update: {
          fillOpacity: {
            value: 1
          }
        }
        hover: {
          fillOpacity: {
            value: 0.5
          }
        }
      }
    }
  ]
}

解决方法

"sort": [ { "@timestamp": { "order": "desc" } } ]  

...
在体内发挥了作用。为什么我仍然不明白。