如何包括范围滑块以转换Vega中的数据？

问题描述

我尝试过的事情： 我包括一个range滑块。此范围滑块旨在更改数据过滤的方式（请参见transform）。 （几乎与本示例https://vega.github.io/vega/examples/population-pyramid/类似）

问题：
当我更改滑块在图形上的位置时，图形的输入没有变化。

问题： 如何更改代码，以便通过用户与范围滑块的交互来更改我的输入参数？

{
      "$schema": "https://vega.github.io/schema/vega/v5.json","width": 400,"height": 200,"padding": 20,"signals": [
        {
          "name": "tooltip","value": {},"on": [
            {"events": "rect:mouSEOver","update": "datum"},{"events": "rect:mouSEOut","update": "{}"}
          ]
        },{
          "name": "Y_Value","bind":{"input": "range","min": 0,"max": 100,"step": 1},"value": 100
        }
      ],"data": [
        {
          "name": "table","values": [
            {"category": "A","amount": 28},{"category": "B","amount": 55},{"category": "C","amount": 43},{"category": "D","amount": 91},{"category": "E","amount": 81},{"category": "F","amount": 53},{"category": "G","amount": 19},{"category": "H","amount": 87}
          ]
        },{
          "name": "range","source": "table","transform": [
            {"type": "filter","expr": "datum.amount <= Y_Value"}
          ]
        }
      ],"scales": [
        {
          "name": "xscale","type": "band","domain": {"data": "table","field": "category"},"range": "width","padding": 0.05,"round": true
        },{
          "name": "yscale","field": "amount"},"nice": true,"range": "height"
        }
      ],"axes": [
        { 
          "orient": "bottom","scale": "xscale","encode": {
            "labels": {
              "interactive": true,"update": {
                "tooltip": {"signal": "datum.label"}
              }
            }
          }
        },{ "orient": "left","scale": "yscale" }
      ],"marks": [
        {
          "type": "rect","from": {"data":"table"},"encode": {
            "enter": {
              "x": {"scale": "xscale","width": {"scale": "xscale","band": 1},"y": {"scale": "yscale","y2": {"scale": "yscale","value": 0}
              
            },"update": {
              "fill": {"value": "steelblue"}
    
            },"hover": {
              "fill": {"value": "red"}
            }
          }
        },{
          "type": "text","encode": {
            "enter": {
              "align": {"value": "center"},"baseline": {"value": "bottom"},"fill": {"value": "#333"}
            },"update": {
              "x": {"scale": "xscale","signal": "tooltip.category","band": 0.5},"signal": "tooltip.amount","offset": -2},"text": {"signal": "tooltip.amount"},"fillOpacity": [
                {"test": "datum === tooltip","value": 0},{"value": 1}
              ]
            }
          }
        }
      ]
    }

解决方法

一段时间后，我想到了这一点：

{
      "$schema": "https://vega.github.io/schema/vega/v5.json","width": 400,"height": 200,"padding": 20,"title": {"text":"A title","anchor":"middle"},"signals": [
        {
          "name": "tooltip","value": {},"on": [
            {"events": "rect:mouseover","update": "datum"},{"events": "rect:mouseout","update": "{}"}
          ]
        },{
          "name": "Threshold","bind":{"input": "range","min": 0,"max": 100,"step": 1},"value": 0
        }
      ],"data": [
        {
          "name": "table","values": [
            {"category": "Mon","amount": 28},{"category": "Tue","amount": 55},{"category": "wed","amount": 43},{"category": "Thu","amount": 91},{"category": "Fri","amount": 81},{"category": "Sat","amount": 53},{"category": "Sun","amount": 19}   
          ]
        },{
          "name": "range","source": "table","transform": [
            {"type": "filter","expr": "datum.amount >= Threshold"}
          ]
        }
      ],"scales": [
        {
          "name": "xscale","type": "band","domain": {"data": "table","field": "category"},"range": "width","padding": 0.05,"round": true
          
        },{
          "name": "yscale","field": "amount"},"nice": true,"range": "height"
        }
      ],"axes": [
        { 
          "orient": "bottom","scale": "xscale","encode": {
            "labels": {
              "interactive": true,"update": {
                "tooltip": {"signal": "datum.label"}
              }
            }
          }
        },{ "orient": "left","scale": "yscale","title": "Y Title" }
      ],"marks": [
        {
          "type": "rect","from": {"data":"range"},"encode": {
            "enter": {
              "x": {"scale": "xscale","width": {"scale": "xscale","band": 1},"y": {"scale": "yscale","y2": {"scale": "yscale","value": 0}
            },"update": {
              "fill": {"value": "steelblue"}   
            },"hover": {
              "fill": {"value": "red"}
            }
          }
        },{
          "type": "text","encode": {
            "enter": {
              "align": {"value": "center"},"baseline": {"value": "bottom"},"fill": {"value": "#333"}
            },"update": {
              "x": {"scale": "xscale","signal": "tooltip.category","band": 0.5},"signal": "tooltip.amount","offset": -2},"text": {"signal": "tooltip.amount"},"fillOpacity": [
                {"test": "datum === tooltip","value": 0},{"value": 1}
              ],"align": {"value": "center"},"fill": {"value": "#333"}
            }
          }
        }
      ]
    }