Vega文本标记未悬停时呈现“未定义”

时间:2020-09-10 19:23:37

标签: vega

我正在尝试在Vega编辑器上使用Vega创建一个简单的条形图。

要重新创建我的问题,请导航至this bar chart example on vega site,然后尝试如下更改文本标记的text属性:

  • 原文:"text": {"signal": "tooltip.amount"},

  • 修改为:"text": {"signal": "tooltip.amount + ' + ' + tooltip.category"},

当没有悬停事件发生时,这会导致undefined + undefined显示在图表的左上角。如何解决此问题以确保其不显示? (问题如下所示) Simple bar chart showing undefined+undefined text displayed

我认为这与刻度和文本标记的工作方式有关,但是我无法找出解决方案。尝试通过将category设置为null并在配置标记不透明度时对其进行测试,从而在鼠标悬停事件中添加默认值,但这没有用。为此的代码(仅在网站上指定对原始示例的更新):

  "signals": [
    {
      "name": "tooltip",
      "value": {"category":null},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{'category':null}"}
      ]
    }
  ],

  ...
  "marks": [
    ...
    {
      "type": "text",
      "encode": {
        ...
        "update": {
          "text": {"signal": "tooltip.amount + ' + ' tooltip.category"},
          "fillOpacity": [
            {"test": "datum === tooltip && tooltip.category!=null", "value": 0},
            {"value": 1}
          ]
        }
      }
    }

1 个答案:

答案 0 :(得分:0)

感谢朋友帮助我解答问题

         "text": [
            {
              "signal": "tooltip.amount + ' + ' + tooltip.category",
              "test": "tooltip.amount"
            },
            {"value": ""}
          ],

问题是当您将鼠标悬停在工具提示对象上时没有值 因为我们将值与'+'字符串连接在一起。未定义的对象被强制为'undefined'字符串。

需要再次将字符串值更新为空字符串。