英文:
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}
}
}
}
]
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论