同步选择

Question

有人可以告诉我如何使用信号同步共享相同数据的两个 vconcat 图中的两个选择吗？

第一个图的选择是 bound 到它的比例（交互式）并与 x 编码相关。
第二个情节的选择与 x 编码有关。

任何时候选择都不应该不同。

这称为概览+详细信息显示。与以 scale domain method it is bidirectional. See the performance plots of Chrome's developer tools for an example. You can use the scale domain 示例作为基线不同：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "selection": {
        "s1": {
          "type": "interval",
          "encodings": ["x"],
          "bind": "scales"
        }
      },
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "axis": {"title": ""}
        },
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "selection": {
        "s2": {
          "type": "interval",
          "encodings": ["x"]
        }
      },
      "width": 480,
      "height": 60,
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

编辑：在JavaScript中这样做不有效：

vegaEmbed('#vis', vegalitespec).then(function(result) {
    result.view.addDataListener("s1_store", async function(name, value) {
        if (Object.is(value[0], result.view.data("s2_store")[0]))
            return;
        await result.view.data("s2_store", value).runAsync();
    });
    result.view.addDataListener("s2_store", async function(name, value) {
        if (Object.is(value[0], result.view.data("s1_store")[0]))
            return;
        await result.view.data("s1_store", value).runAsync();
    });
}).catch(console.error);

编辑：由于 vconcat 的嵌套范围，这可能无法实现。我可以像 scale domains 一样连接单向绑定；相反的情况仍然难以捉摸。尽管如此，一些方法仍未经过测试。例如在 JavaScript 或 Vega 中创建嵌套信号处理程序（假设外部范围可访问），或修补 VegaLite 以将“s1_x”信号推送到外部范围。

vegaEmbed('#vis', vegalitespec3).then(async function(result) {
  result.view.addSignalListener("s1", function(name, value){
    result.view.signal("s2_date", value.date);
    result.view.runAsync();
  });
                
  result.view.addSignalListener("s2", function(name, value){
    // todo: handle bounds / null
    if (!value.date)
      return;
    // This does not work with individual plots. Maybe it has
    // been rewired as writable in vconcat plots. Result: nope.
    //result.view.signal("s1", value);
    // Thanks to nested scopes, "s1_x" is not available.
    //result.view.signal("s1_x", value.date.map(result.view.scale("concat_1_x")));
    // How about editing the runtime dataflow object? Result: nope.
    //result.view._runtime.subcontext[1].signals.s1_x.value = value.date.map(result.view.scale("concat_1_x"));
    result.view.runAsync();
  });

}).catch(console.error);

Answer 1

已解决：

修补生成的 Vega 以将“s1_x”信号推送到外部范围。
添加信号侦听器以更新每个图的选择。
使用比例尺将数据-space转换为绘图-space。
使用屏障布尔值来防止无限循环。

%%javascript
window.vegalitespec3 = {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": vegaDatasets["sp500.csv"].url},
  "vconcat": [
    {
      "selection": {
        "s2": {
          "type": "interval",
          "encodings": ["x"],
          "bind": "scales"
        }
      },
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "axis": {"title": ""}
        },
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "selection": {
        "s1": {
          "type": "interval",
          "encodings": ["x"]
        }
      },
      "width": 480,
      "height": 60,
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

%%HTML
<!DOCTYPE html>
<html>
<head>
    <style>.vega-embed.has-actions {width:90%}</style>

    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-datasets"></script>
</head>
<body>

<div id="vis"></div>

<script type="text/javascript">
    vegaEmbed( '#vis', vegalitespec3, {"patch": spec => {
        spec.signals.push({"name": "s1_x", "value": []});
        var s_s1_x = spec.marks.find(i => i.name == "concat_1_group")
                         .signals.find(i => i.name == "s1_x");
        delete s_s1_x.value;
        s_s1_x.push = "outer";
        return spec;
    }}).then(function(result) {
        result.locals = {"barrier": true};
        
        result.view.addSignalListener("s1", function(name, value){
            result.locals.barrier = !result.locals.barrier;
            if (!result.locals.barrier)
                return;
            result.view.signal("s2_date", value.date);
            result.view.runAsync();
        });
                
        result.view.addSignalListener("s2", function(name, value){
            result.locals.barrier = !result.locals.barrier;
            if (!result.locals.barrier)
                return;
            value = value.date ? value.date.map(result.view.scale("concat_1_x")) : [];
            result.view.signal("s1_x", value);
            result.view.runAsync();
        });
    }).catch(console.error);
</script>
</body>
</html>

同步选择

Synchronized Selections

vega-lite