How to avoid zoom conflict in a line chart with layer?

问题

VEGA-lite is not perfect, but is very good, and in general for something that looks like a bug, there are a workaround... So I supposing that in this "bug" we have a workaround.

((edit after answer: it is not a real bug, is a "semantic bug" on the specification language))

The strange behaviour, a "semantic bug": I was using selection: { "grid": {"type":"interval", "bind":"scales"} } for zoom, in a trivial context, with simple mark: 'line'. When I add layer, it stopts to work.

    {
        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'"}]  }
        ]
      }

The workaround: as @jakevdp commented here, "the interval selection must be added to one of the layers". But

How to do this "interval selection"?
The data on my chart is not static, I need a interval that changes with it, so, not make sense to set a interval.

回答1:

The "interval selection" I referred to is the interval selection definition within your chart:

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

You cannot declare it in the top-level chart; you must declare it in one of the layers:

{
    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'"}]
        }
    ]
 }

Your issue is not a bug, nor is my solution a workaround: the vega-lite schema specifies that selections must be declared within a unit spec (i.e. an individual layer).

来源：https://stackoverflow.com/questions/61668295/how-to-avoid-zoom-conflict-in-a-line-chart-with-layer

标签

vega-lite