时间戳

首页 > 解决方案 > 如何避免带图层的折线图中的缩放冲突？

vega-lite - 如何避免带图层的折线图中的缩放冲突？

问题描述

VEGA-lite 并不完美，但非常好，而且通常对于看起来像错误的东西，有一个解决方法......所以我假设在这个“错误”中我们有一个解决方法。

（（回答后编辑：它不是真正的错误，是规范语言上的“语义错误”））

奇怪的行为，一个“语义错误”：我selection: { "grid": {"type":"interval", "bind":"scales"} } 用简单的mark: 'line'. 当我添加layer时，它停止工作。

    {
        title: "Número de registros por minuto (n_count normalizado)", 
        $schema: vglVers,
        data: { "url":"mySQLtable" },
        selection: { "grid": {"type":"interval", "bind":"scales"} }, // was working with simple mark
        //mark: 'line',
        width:340,
        encoding: {
          x: {"field": "instant", "type": "temporal"},
          y: {"field": "n_pmin", "type": "quantitative"},
          color: {"field": "symbol", "type": "nominal"}
        },
        layer: [
            {
              "mark": {"type": "line", "point": true},
              "transform": [{"filter": "datum.symbol == 'n_pmin'"}]
            },
            { "mark": {"type": "line"}, "transform": [{"filter": "datum.symbol != 'n_pmin'"}]  }
        ]
      }

解决方法：正如@jakevdp 在这里评论的那样， “必须将间隔选择添加到其中一个层”。但

  1. 这个“区间选择”怎么做？

  2. 我图表上的数据不是静态的，我需要一个随它变化的间隔，所以设置间隔没有意义。

标签： vega-lite

解决方案

我提到的“区间选择”是图表中的区间选择定义：

selection: { "grid": {"type":"interval", "bind":"scales"} }

不能在顶层图表中声明；您必须在其中一层声明它：

{
    title: "Número de registros por minuto (n_count normalizado)", 
    $schema: vglVers,
    data: { "url":"mySQLtable" },
    width:340,
    encoding: {
      x: {"field": "instant", "type": "temporal"},
      y: {"field": "n_pmin", "type": "quantitative"},
      color: {"field": "symbol", "type": "nominal"}
    },
    layer: [
        {
          "mark": {"type": "line", "point": true},
          "transform": [{"filter": "datum.symbol == 'n_pmin'"}],
          "selection": {"grid": {"type":"interval", "bind":"scales"}},
        },
        {
          "mark": {"type": "line"},
          "transform": [{"filter": "datum.symbol != 'n_pmin'"}]
        }
    ]
 }

您的问题不是错误，我的解决方案也不是解决方法：vega-lite 模式指定必须在单元规范（即单个层）中声明选择。

推荐阅读