Question

是否有一种方法可以使这种互动性融入Vega-lite图表中，例如像这样缩放和跟踪 https://vega.github.io/editor/#/edited， https://vega.github.io/vega-lite/examples/interactive_overview_detail.html

我已经尝试了好几天，但没有任何实际效果-缩放失败或多层与交互的组合似乎不起作用。我至少需要一种方法来放大包含工具提示的图表...

    {
   "$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

否，缩放行为仅在Vega-Lite中用于定量轴，并且您的x轴数据不是定量的（它由字母数字代码组成）。

当前在重复图层中也无法使用比例选择（我怀疑这是一个错误），因此，即使将序列号转换为定量，也无法直接使用缩放。

解决这两个问题的一种方法是使用转换将序列号转换为数字，并使用fold而非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}
  }
}

缩放，跟踪Vega-Lite重复图表

1 个答案: