Vega-Lite 重复图表中的缩放、跟踪

Question

Is there a way of getting interactivity into this vega-lite diagramm eg Zooming and Tracking like so https://vega.github.io/editor/#/edited , https://vega.github.io/vega-lite/examples/interactive_overview_detail.html

I tried for days now but nothing really works - either scaling is off or the combination of multilayer with interaction doesn't seem to work. I need at least a way to zoom into the chart including tooltips...

    {
   "$schema":"https://vega.github.io/schema/vega-lite/v4.json",
   "data":{
      "values":[
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444444",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45466
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444445",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45433
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444446",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45400
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444447",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444448",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45403
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444449",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         }
      ]
   },
   "repeat":{
      "layer":[
         "lowval",
         "highval",
         "resultdecimal"
      ]
   },
   "spec":{
      "mark":{
         "type":"line",
         "strokeWidth":3,
         "point":{
            "size":45,
            "filled":true
         }
      },
      "encoding":{
         "x":{
            "field":"serialnumber",
            "type":"ordinal",
            "axis":{
               "labelAngle":-70,
               "title":"Selected Tests",
               "titleFontSize":10
            }
         },
         "y":{
            "field":{
               "repeat":"layer"
            },
            "type":"quantitative",
            "axis":{
               "title":"Teststeps in selected Tests",
               "titleFontSize":10
            },
            "scale":{
               "domain":[
                  45000,
                  45500
               ]
            }
         },
         "tooltip":[
            {
               "field":"serialnumber",
               "type":"ordinal"
            },
            {
               "field":"resultdecimal",
               "type":"quantitative"
            }
         ],
         "color":{
            "datum":{
               "repeat":"layer"
            },
            "type":"nominal",
            "scale":{
               "range":[
                  "red",
                  "orange",
                  "blue",
                  "green"
               ]
            }
         }
      }
   },
   "config":{
      "font":"Roboto",
      "axisX":{
         "labelFontSize":9
      },
      "axisY":{
         "labelFontSize":9
      }
   }
}

Answer 1

No, zooming behavior is only available in Vega-Lite for quantitative axes, and your x-axis data is not quantitative (it consists of alphanumeric codes).

Scale-bound selections also are not currently possible to use within repeated layers (I suspect this is a bug), so even if you transform your serial numbers to quantitative, you could not use a zoom directly.

One way to fix both these issues is to use transforms to convert your serial numbers to numeric, and to build your chart using fold rather than repeat ( view in editor ):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444444",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45466
      },
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444445",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45433
      },
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444446",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45400
      },
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444447",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45422
      },
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444448",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45403
      },
      {
        "stepid": "4444",
        "stepname": "Name1",
        "serialnumber": "SN3444449",
        "lowval": 45000,
        "highval": 45500,
        "resultdecimal": 45422
      }
    ]
  },
  "transform": [
    {
      "calculate": "parseInt(slice(datum.serialnumber, 2))",
      "as": "serialnumber"
    },
    {"fold": ["lowval", "highval", "resultdecimal"], "as": ["column", "value"]}
  ],
  "selection": {"zoom": {"type": "interval", "bind": "scales"}},
  "mark": {
    "type": "line",
    "strokeWidth": 3,
    "point": {"size": 45, "filled": true}
  },
  "encoding": {
    "x": {
      "field": "serialnumber",
      "type": "quantitative",
      "axis": {
        "labelAngle": -70,
        "title": "Selected Tests",
        "titleFontSize": 10
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {"title": "Teststeps in selected Tests", "titleFontSize": 10},
      "scale": {"domain": [45000, 45500]}
    },
    "tooltip": [
      {"field": "serialnumber", "type": "ordinal"},
      {"field": "resultdecimal", "type": "quantitative"}
    ],
    "color": {
      "field": "column",
      "type": "nominal",
      "scale": {"range": ["red", "orange", "blue", "green"]}
    }
  },
  "config": {
    "font": "Roboto",
    "axisX": {"labelFontSize": 9},
    "axisY": {"labelFontSize": 9}
  }
}