Question

我正在尝试使用信号来更改网页上Vega图表上的比例域或轴标签。我在信号中以及刻度和轴中放置了调试表达式，以验证信号是否正在接收从javascript发送的值（例如view.signal("xdomainMin",0);），并在控制台中查看消息。

当vegaEmbed首先从规格中初始化时，一切正常。在JavaScript控制台中，信号更新表达式会打印出初始值，然后比例域和轴标题表达式会从信号中打印出相同的初始值。

但是，当我从javascript发送信号以在其后更改域或标签时，则会接收到该信号并将其打印到控制台，但是域和标题信号表达式在第一次之后不会输出任何内容。就像它们只能永久设置一次一样。

如果我从信号中删除了value:初始化程序，则控制台会显示该值未定义，随后在发送信号值时，信号会使用该值，但不会传播到该值。域或标签。

如果将view.getState()登录到控制台，则表明信号已用新值更新。但是，页面上的图表仍然具有旧的轴标签和旧的域比例。

这很奇怪，因为我看到了其他示例代码，人们说他们能够从javascript动态修改域。例如：this SO question about changing the domain

这是一个简化的规范：

{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "autosize": { "type": "fit", "contains": "padding" },
    "padding": 5,
    "width": 300,
    "height": 300,
    "data": [{
        "name": "xy",
        "values": [
            {"1": 1.0, "2": 12.0},
            {"1": 10.4, "2": 22.2},
            {"1": 20.8, "2": 42.5}
        ]
    }],
    "signals": [
        { "name": "xkey", "value": "1", "update": "debug('inside signal, xkey is ', xkey)" },
        { "name": "ykey", "value": "2", "update": "debug('inside signal, ykey is ', ykey)" },
        { "name": "xlabel", "value": "XXX", "update": "debug('inside signal, xlabel is ', xlabel)" },
        { "name": "ylabel", "value": "YYY", "update": "debug('inside signal, ylabel is ', ylabel)" },
        { "name": "xdomainMin", "value": -100, "update": "debug('inside signal, xdomainMin is ', xdomainMin)" },
        { "name": "xdomainMax", "value":  100, "update": "debug('inside signal, xdomainMax is ', xdomainMax)" }
    ],
    "scales": [{
        "name": "xscale",
        "domain": [0, 100],
        "domainMin": { "signal": "debug('DOMAIN CHANGE xdomainMin =', xdomainMin)" },
        "domainMax": { "signal": "debug('DOMAIN CHANGE xdomainMax =', xdomainMax)" },
        "range": "width"
    }, {
        "name": "yscale",
        "domain": [0, 100],
        "range": "height"
    }],
    "axes": [
        { "orient": "bottom", "scale": "xscale", "title": { "signal": "debug('CHANGE X LABEL =', xlabel)" } },
        { "orient": "left", "scale": "yscale", "title": { "signal": "debug('CHANGE Y LABEL =', ylabel)"} }
    ],
    "marks": [
        {
            "type": "symbol",
            "from": { "data": "xy" },
            "encode": {
                "enter": {
                    "x": { "scale": "xscale", "field": "1"},
                    "y": { "scale": "yscale", "field": "2"}
                },
                "update": {
                    "x": { "scale": "xscale", "field": {"signal": "debug('x ', datum[xkey], xkey)"} },
                    "y": { "scale": "yscale", "field": {"signal": "debug('y ', datum[ykey], ykey)"} },
                    "fill": { "value": "steelblue" }
                }
            }
        }
    ]
}

和javascript信号调用就像这样：

    vega_view.signal("xlabel", "test");
    vega_view.signal("xdomainMin", 0);
    vega_view.signal("xdomainMax", 42);
    vega_view.runAsync()
        .then( ()=>{
            console.log("\nSTATE:")
            console.log(vega_view.getState());
            console.log("\n");
        });

我什至无法想象不可能通过信号来更改轴标签。我在做什么错了？

Answer 1

这是一个简单的示例，其中标题和域可以更新。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "padding": 5,

  "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}
      ]
    }
  ],

  "signals": [
    {
      "name": "domain",
      "value": ["A", "B", "C"]
    },
    {
      "name": "title",
      "value": "Title"
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "point",
      "domain": {"signal": "domain"},
      "range": "width"
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale", "title": {"signal": "title"} }
  ]
}

您的规格中存在一些问题。首先，更新表达式调试表达式不正确。 debug函数是具有副作用的noop，应仅取一个值。其次，field应该是字段的名称，而不是值。这是可行的固定示例。

{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "autosize": { "type": "fit", "contains": "padding" },
    "padding": 5,
    "width": 300,
    "height": 300,
    "data": [{
        "name": "xy",
        "values": [
            {"1": 1.0, "2": 12.0},
            {"1": 10.4, "2": 22.2},
            {"1": 20.8, "2": 42.5}
        ]
    }],
    "signals": [
        { "name": "xkey", "value": "1" },
        { "name": "ykey", "value": "2" },
        { "name": "xlabel", "value": "XXX" },
        { "name": "ylabel", "value": "YYY"},
        { "name": "xdomainMin", "value": -100 },
        { "name": "xdomainMax", "value":  100 }
    ],
    "scales": [{
        "name": "xscale",
        "domain": [0, 1],
        "domainMin": { "signal": "xdomainMin" },
        "domainMax": { "signal": "xdomainMax" },
        "range": "width"
    }, {
        "name": "yscale",
        "domain": [0, 100],
        "range": "height"
    }],
    "axes": [
        { "orient": "bottom", "scale": "xscale", "title": { "signal": "xlabel" } },
        { "orient": "left", "scale": "yscale", "title": { "signal": "ylabel"} }
    ],
    "marks": [
        {
            "type": "symbol",
            "from": { "data": "xy" },
            "encode": {
                "enter": {
                    "x": { "scale": "xscale", "field": "1"},
                    "y": { "scale": "yscale", "field": "2"}
                },
                "update": {
                    "x": { "scale": "xscale", "field": {"signal": "xkey"} },
                    "y": { "scale": "yscale", "field": {"signal": "ykey"} },
                    "fill": { "value": "steelblue" }
                }
            }
        }
    ]
}

多次更改信号中的域或标签

1 个答案: