主页 / coding / 问题 / 78976157
Accepted
Vlad
Asked: 2024-09-12 09:39:39 +0800 CST

Vega 多线图表因移动刷过的区域而混乱，但折叠后仍能正常工作

  • 772

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

每一行都有自己的标记：

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

在此处输入图片描述

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

在此处输入图片描述

数据在画笔上被过滤，然后使用 collect>sort 进行转换 - 它在数据窗格中看起来排序正确。我发现将画笔区域向右移动时有效，但向相反方向移动会产生此问题。

如果我将系列折叠成键|值列，它可以正常工作并且不会出现这个问题！ 在此处输入图片描述

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

powerbi

1 个回答

  1. Best Answer

    添加顶级排序：

    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
    }
  ]
}
    • 1

相关问题