在 Vega 中悬停不同标记时更新文本标记。

huangapple
go评论49阅读模式
英文:

Update text mark on hovering different marks in Vega

问题

在我的Vega规范中，我有3个标记：一个条形图，与该条形图相关的文本，以及一个文本（"悬停事件类型详细信息标记"），它应该在悬停在特定条形图/相关文本上时绘制相应的详细信息。

我从未成功使其工作。

这是当前的Vega规范：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "The PM2.5 value of Beijing observed 15 keys, highlighting the keys when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
  "background": "white",
  "padding": 5,
  "height": 250,
  "width": 500,
  "autosize": {
    "type": "fit",
    "resize": true
  },
  "data": [
    {
      "name": "source",
      "values": [
        { "key": "TYPE 1", "doc_count": 113 },
        { "key": "TYPE 2", "doc_count": 32 }
      ]
    }
  ],
  "signals": [
    {
      "name": "hoveredBar",
      "value": null,
      "on": [
        {"events": "rect:mouseover", "update": "datum.key"},
        {"events": "rect:mouseout", "update": "null"}
      ]
    },
    {
      "name": "hoveredText",
      "value": null,
      "on": [
        {"events": "text:mouseover", "update": "datum.key"},
        {"events": "text:mouseout", "update": "null"}
      ]
    },
    {
      "name": "hoveredEventType",
      "value": null,
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout", "update": "null"},
        {"events": "text:mouseover", "update": "datum"},
        {"events": "text:mouseout", "update": "null"}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "source", "field": "key"},
      "range": "width",
      "paddingInner": 0.1,
      "paddingOuter": 0.2
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "source", "field": "doc_count"},
      "range": "height",
      "nice": true
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "source"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "key"},
          "width": {"scale": "x", "band": 0.8},
          "y": {"scale": "y", "field": "doc_count"},
          "y2": {"scale": "y", "value": 0},
          "fill": {"value": "#00afa4"},
          "opacity": {"value": 1}
        },
        "update": {
          "opacity": [
            {"test": "datum.key === hoveredBar || datum.key === hoveredText", "value": 0.7},
            {"value": 1}
          ]
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "source"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "key", "band": 0.43},
          "y": {"scale": "y", "field": "doc_count", "offset": -10},
          "text": {"field": "key"},
          "align": {"value": "center"},
          "fill": {"value": "black"}
        },
        "update": {
          "fill": [
            {"test": "datum.key === hoveredBar || datum.key === hoveredText", "value": "#f05c3e"},
            {"value": "black"}
          ]
        }
      }
    },
    // 悬停的事件类型详细信息标记
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": {"signal": "width - 10"},
          "y": {"signal": "-150"},
          "text": {"signal": "hoveredEventType ? hoveredEventType.key + ': ' + hoveredEventType.doc_count : ''"},
          "align": {"value": "right"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#f05c3e"},
          "fontWeight": {"value": "bold"},
          "fontSize": {"value": 16}
        },
        "update": { 
          "fillOpacity": {"signal": "hoveredEventType ? 1 : 0"}
        }
      }
    }
  ]
}

我不确定信号"hoveredEventType"是否正确定义，因为它似乎从不触发。相比之下，其他信号 - "hoveredBar"和"hoveredText" - 如预期般更新了条形图/相关文本标记。我的方法是否错误，或者是否有限制阻止我打算实现的行为？

英文:

In my Vega specification I have 3 marks: a bar, a text related to that bar, and a text ("Hovered EventType details mark") that is supposed to plot the corresponding details when a particular bar / related text is hovered.

I never managed to make this work.

This is the current Vega specification:

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "The PM2.5 value of Beijing observed 15 keys, highlighting the keys when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
"background": "white",
"padding": 5,
"height": 250,
"width": 500,
"autosize": {
"type": "fit",
"resize": true
},
"data": [
{
"name": "source",
"values": [
{ "key": "TYPE 1", "doc_count": 113 },
{ "key": "TYPE 2", "doc_count": 32 }
]
}
],
"signals": [
{
"name": "hoveredBar",
"value": null,
"on": [
{"events": "rect:mouseover", "update": "datum.key"},
{"events": "rect:mouseout", "update": "null"}
]
},
{
"name": "hoveredText",
"value": null,
"on": [
{"events": "text:mouseover", "update": "datum.key"},
{"events": "text:mouseout", "update": "null"}
]
},
{
"name": "hoveredEventType",
"value": null,
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "null"},
{"events": "text:mouseover", "update": "datum"},
{"events": "text:mouseout", "update": "null"}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {"data": "source", "field": "key"},
"range": "width",
"paddingInner": 0.1,
"paddingOuter": 0.2
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source", "field": "doc_count"},
"range": "height",
"nice": true
}
],
"marks": [
{
"type": "rect",
"from": {"data": "source"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "key"},
"width": {"scale": "x", "band": 0.8},
"y": {"scale": "y", "field": "doc_count"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#00afa4"},
"opacity": {"value": 1}
},
"update": {
"opacity": [
{"test": "datum.key === hoveredBar || datum.key === hoveredText", "value": 0.7},
{"value": 1}
]
}
}
},
{
"type": "text",
"from": {"data": "source"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "key", "band": 0.43},
"y": {"scale": "y", "field": "doc_count", "offset": -10},
"text": {"field": "key"},
"align": {"value": "center"},
"fill": {"value": "black"}
},
"update": {
"fill": [
{"test": "datum.key === hoveredBar || datum.key === hoveredText", "value": "#f05c3e"},
{"value": "black"}
]
}
}
},
// Hovered EventType details mark
{
"type": "text",
"encode": {
"enter": {
"x": {"signal": "width - 10"},
"y": {"signal": "-150"},
"text": {"signal": "hoveredEventType ? hoveredEventType.key + ': ' + hoveredEventType.doc_count : ''"},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#f05c3e"},
"fontWeight": {"value": "bold"},
"fontSize": {"value": 16}
},
"update": { 
"fillOpacity": {"signal": "hoveredEventType ? 1 : 0"}
}
}
}
]
}

I am not sure if the signal "hoveredEventType", which is supposed to receive data during hover and mouseout events, is correctly defined, since it never gets to be triggered. In comparison, the other signals - "hoveredBar" and "hoveredText" - work as expected updating the bar / related text marks.

Is my approach wrong, or is there a limitation that prevents the behavior I intend to implement?

答案1

得分: 0

以下是您要的翻译内容：

{
   "$schema":"https://vega.github.io/schema/vega/v5.json",
   "description":"北京观测到的PM2.5值有15个键，当PM2.5水平对人类健康有危害时，突出显示这些键。数据来源 https://chartaccent.github.io/chartaccent.html",
   "background":"白色",
   "padding":5,
   "height":250,
   "width":500,
   "autosize":{
      "type":"适应",
      "resize":true
   },
   "data":[
      {
         "name":"source",
         "values":[
            {
               "key":"类型 1",
               "doc_count":113
            },
            {
               "key":"类型 2",
               "doc_count":32
            }
         ]
      }
   ],
   "signals":[
      {
         "name":"hoveredBar",
         "value":null,
         "on":[
            {
               "events":"rect:mouseover",
               "update":"datum.key"
            },
            {
               "events":"rect:mouseout",
               "update":"null"
            }
         ]
      },
      {
         "name":"hoveredText",
         "value":null,
         "on":[
            {
               "events":"text:mouseover",
               "update":"datum.key"
            },
            {
               "events":"text:mouseout",
               "update":"null"
            }
         ]
      },
      {
         "name":"hoveredEventType",
         "value":null,
         "on":[
            {
               "events":"rect:mouseover",
               "update":"datum"
            },
            {
               "events":"rect:mouseout",
               "update":"null"
            },
            {
               "events":"text:mouseover",
               "update":"datum"
            },
            {
               "events":"text:mouseout",
               "update":"null"
            }
         ]
      }
   ],
   "scales":[
      {
         "name":"x",
         "type":"带宽",
         "domain":{
            "data":"source",
            "field":"key"
         },
         "range":"width",
         "paddingInner":0.1,
         "paddingOuter":0.2
      },
      {
         "name":"y",
         "type":"线性",
         "domain":{
            "data":"source",
            "field":"doc_count"
         },
         "range":"height",
         "nice":true
      }
   ],
   "marks":[
      {
         "type":"矩形",
         "from":{
            "data":"source"
         },
         "encode":{
            "enter":{
               "x":{
                  "scale":"x",
                  "field":"key"
               },
               "width":{
                  "scale":"x",
                  "band":0.8
               },
               "y":{
                  "scale":"y",
                  "field":"doc_count"
               },
               "y2":{
                  "scale":"y",
                  "value":0
               },
               "fill":{
                  "value":"#00afa4"
               },
               "opacity":{
                  "value":1
               }
            },
            "update":{
               "opacity":[
                  {
                     "test":"datum.key === hoveredBar || datum.key === hoveredText",
                     "value":0.7
                  },
                  {
                     "value":1
                  }
               ]
            }
         }
      },
      {
         "type":"文本",
         "from":{
            "data":"source"
         },
         "encode":{
            "enter":{
               "x":{
                  "scale":"x",
                  "field":"key",
                  "band":0.43
               },
               "y":{
                  "scale":"y",
                  "field":"doc_count",
                  "offset":-10
               },
               "text":{
                  "field":"key"
               },
               "align":{
                  "value":"center"
               },
               "fill":{
                  "value":"黑色"
               }
            },
            "update":{
               "fill":[
                  {
                     "test":"datum.key === hoveredBar || datum.key === hoveredText",
                     "value":"#f05c3e"
                  },
                  {
                     "value":"黑色"
                  }
               ]
            }
         }
      },
      {
         "type":"文本",
         "data":[
            
         ],
         "encode":{
            "update":{
               "x":{
                  "signal":"width - 10"
               },
               "y":{
                  "signal":"-150"
               },
               "text":{
                  "signal":"hoveredEventType ? hoveredEventType.key + ': ' + hoveredEventType.doc_count : ''"
               },
               "align":{
                  "value":"right"
               },
               "baseline":{
                  "value":"bottom"
               },
               "fill":{
                  "value":"#f05c3e"
               },
               "fontWeight":{
                  "value":"bold"
               },
               "fontSize":{
                  "value":16
               }
            }
         }
      }
   ]
}

希望这对您有所帮助！如果您需要进一步的翻译或帮助，请随时告诉我。

英文:

Is the following what you want?

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "The PM2.5 value of Beijing observed 15 keys, highlighting the keys when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
"background": "white",
"padding": 5,
"height": 250,
"width": 500,
"autosize": {"type": "fit", "resize": true},
"data": [
{
"name": "source",
"values": [
{"key": "TYPE 1", "doc_count": 113},
{"key": "TYPE 2", "doc_count": 32}
]
}
],
"signals": [
{
"name": "hoveredBar",
"value": null,
"on": [
{"events": "rect:mouseover", "update": "datum.key"},
{"events": "rect:mouseout", "update": "null"}
]
},
{
"name": "hoveredText",
"value": null,
"on": [
{"events": "text:mouseover", "update": "datum.key"},
{"events": "text:mouseout", "update": "null"}
]
},
{
"name": "hoveredEventType",
"value": null,
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "null"},
{"events": "text:mouseover", "update": "datum"},
{"events": "text:mouseout", "update": "null"}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {"data": "source", "field": "key"},
"range": "width",
"paddingInner": 0.1,
"paddingOuter": 0.2
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source", "field": "doc_count"},
"range": "height",
"nice": true
}
],
"marks": [
{
"type": "rect",
"from": {"data": "source"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "key"},
"width": {"scale": "x", "band": 0.8},
"y": {"scale": "y", "field": "doc_count"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#00afa4"},
"opacity": {"value": 1}
},
"update": {
"opacity": [
{
"test": "datum.key === hoveredBar || datum.key === hoveredText",
"value": 0.7
},
{"value": 1}
]
}
}
},
{
"type": "text",
"from": {"data": "source"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "key", "band": 0.43},
"y": {"scale": "y", "field": "doc_count", "offset": -10},
"text": {"field": "key"},
"align": {"value": "center"},
"fill": {"value": "black"}
},
"update": {
"fill": [
{
"test": "datum.key === hoveredBar || datum.key === hoveredText",
"value": "#f05c3e"
},
{"value": "black"}
]
}
}
},
{
"type": "text",
"data": [{}],
"encode": {
"update": {
"x": {"signal": "width - 10"},
"y": {"signal": "-150"},
"text": {
"signal": "hoveredEventType ? hoveredEventType.key + ': ' + hoveredEventType.doc_count : ''"
},
"align": {"value": "right"},
"baseline": {"value": "bottom"},
"fill": {"value": "#f05c3e"},
"fontWeight": {"value": "bold"},
"fontSize": {"value": 16}
}
}
}
]
}

huangapple
  • 本文由 发表于 2023年6月8日 19:24:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431344.html
  • hover
  • vega
  • vega-lite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定