我正在使用vega创建一个分组的条形图，当我将鼠标悬停在一个条形或一组子条上时，我想要显示一些数字（在我的标签数据字段中）。下面的json对象似乎有效，但当我移动到图形的一部分时，它显示了所有条形的所有数量。
{
"scales": [
{
"padding": 0.2,
"range": "height",
"type": "ordinal",
"domain": {
"field": "category",
"data": "table"
},
"name": "cat"
},
{
"domain": {
"field": "value",
"data": "table"
},
"name": "val",
"range": "width",
"type": "linear",
"round": "true",
"nice": "true"
},
{
"range": "category20",
"type": "ordinal",
"domain": {
"field": "position",
"data": "table"
},
"name": "color"
}
],
"axes": [
{
"tickSize": 0,
"scale": "cat",
"type": "y",
"tickPadding": 8
},
{
"scale": "val",
"type": "x"
}
],
"signals": [
{
"name": "tooltip",
"init": {},
"streams": [
{"type": "rect:mouseover", "expr": "datum"},
{"type": "rect:mouseout", "expr": "{}"}
]
}
],
"predicates": [
{
"name": "tooltip", "type": "==",
"operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
}
],
"height": 800,
"width": 600,
"marks": [
{
"from": {
"data": "table",
"transform": [
{
"type": "facet",
"groupby": [
"category"
]
}
]
},
"marks": [
{
"type": "rect",
"name": "bars",
"properties": {
"enter": {
"y": {
"field": "position",
"scale": "pos"
},
"x": {
"field": "value",
"scale": "val"
},
"x2": {
"scale": "val",
"value": 0
},
"fill": {
"field": "position",
"scale": "color"
},
"height": {
"band": "true",
"scale": "pos"
}
}
}
},
{
"from": {
"mark": "bars"
},
"type": "text",
"properties": {
"enter": {
"align": {"value": "center"},
"fill": {"value": "#333"}
},
"update": {
"x": { "field": "x2"},
"dy": {"field":"height", "mult": 0.5},
"y": {"field":"y"},
"text": {"field": "datum.label"},
"align": {"value":"center"},
"baseline":{"value":"middle"},
"fillOpacity": {
"rule": [
{
"predicate": {"name": "tooltip", "id": {"value": null}},
"value": 0
},
{"value": 1}
]
}
}
}
}
],
"type": "group",
"properties": {
"enter": {
"y": {
"field": "key",
"scale": "cat"
},
"height": {
"band": "true",
"scale": "cat"
}
}
},
"scales": [
{
"range": "height",
"type": "ordinal",
"name": "pos",
"domain": {
"field": "position"
}
}
]
}
],
"data": [
{
"values": [
{
"category": "A",
"position": 1,
"value": 1661.0,
"label": 40.0
},
{
"category": "A",
"position": 2,
"value": 2928.0,
"label": 35.0
},
{
"category": "A",
"position": 3,
"value": 9010.0,
"label": 69.0
},
{
"category": "A",
"position": 4,
"value": 6459.0,
"label": 97.0
},
{
"category": "B",
"position": 1,
"value": 1022.0,
"label": 39.0
},
{
"category": "B",
"position": 2,
"value": 1185.0,
"label": 33.0
},
{
"category": "B",
"position": 3,
"value": 567.0,
"label": 60.0
},
{
"category": "B",
"position": 4,
"value": 759.0,
"label": 84.0
}
],
"name": "table"
}
]
}
我也尝试在标记块中使用信号，如下所示，但这样做不会给我想要的结果（所有数字都显示在彼此的顶部，不可读）。
{
"from": {
"mark": "bars"
},
"type": "text",
"properties": {
"enter": {
"align": {"value": "center"},
"fill": {"value": "#333"}
},
"update": {
"x": { "signal": "tooltip.x2"},
"dy": {"field":"height", "mult": 0.5},
"y": {"signal":"tooltip.y"},
"text": {"field": "datum.label"},
"align": {"value":"center"},
"baseline":{"value":"middle"},
"fillOpacity": {
"rule": [
{
"predicate": {"name": "tooltip", "id": {"value": null}},
"value": 0
},
{"value": 1}
]
}
}
}
}
任何人都可以帮助了解如何获得所需的结果并了解数据如何通过（子）标记传递给该信号吗？
答案 0 :(得分：1)
我通过指定三个谓词解决了这个问题，一个谓词检查datum.position是否等于工具提示的信号数据给出的位置。检查类别的另一个谓词和检查这两个条件的最后一个谓词。当您将鼠标悬停在图表中的条形图上并且该条形图的位置和类别基准面与工具提示信号中的相同时，文本将变为不透明，否则它将保持透明。
{
"scales": [
{
"padding": 0.2,
"range": "height",
"type": "ordinal",
"domain": {
"field": "category",
"data": "table"
},
"name": "cat"
},
{
"domain": {
"field": "value",
"data": "table"
},
"name": "val",
"range": "width",
"type": "linear",
"round": "true",
"nice": "true"
},
{
"range": "category20",
"type": "ordinal",
"domain": {
"field": "position",
"data": "table"
},
"name": "color"
}
],
"axes": [
{
"tickSize": 0,
"scale": "cat",
"type": "y",
"tickPadding": 8
},
{
"scale": "val",
"type": "x"
}
],
"signals": [
{
"name": "tooltip",
"init": {},
"streams": [
{"type": "rect:mouseover", "expr": "datum"},
{"type": "rect:mouseout", "expr": "{}"}
]
}
],
"predicates": [
{
"name": "isPosition", "type": "==",
"operands": [{"signal": "tooltip.position"}, {"arg": "position"}]
},
{
"name": "isCategory", "type": "==",
"operands": [{"signal": "tooltip.category"}, {"arg": "category"}]
},
{
"name": "iftooltip", "type": "and",
"operands": [{"predicate": "isPosition"}, {"predicate": "isCategory"}]
}
],
"height": 800,
"width": 600,
"marks": [
{
"from": {
"data": "table",
"transform": [
{
"type": "facet",
"groupby": [
"category"
]
}
]
},
"marks": [
{
"type": "rect",
"name": "bars",
"properties": {
"enter": {
"y": {
"field": "position",
"scale": "pos"
},
"x": {
"field": "value",
"scale": "val"
},
"x2": {
"scale": "val",
"value": 0
},
"fill": {
"field": "position",
"scale": "color"
},
"height": {
"band": "true",
"scale": "pos"
}
}
}
},
{
"from": {
"mark": "bars"
},
"type": "text",
"properties": {
"enter": {
"align": {"value": "center"},
"fill": {"value": "#333"}
},
"update": {
"x": { "field": "x2","offset":-10},
"y": {"field":"y"},
"dy": {"field": "height", "mult": 0.5},
"text": {"signal": "tooltip.label"},
"align": {"value":"center"},
"baseline":{"value":"middle"},
"fillOpacity": {
"rule": [
{
"predicate": {"name": "iftooltip", "position": {"field": "datum.position"},"category":{"field":"datum.category"}},
"value": 1
},
{"value": 0}
]}
}
}
}
],
"type": "group",
"properties": {
"enter": {
"y": {
"field": "key",
"scale": "cat"
},
"height": {
"band": "true",
"scale": "cat"
}
}
},
"scales": [
{
"range": "height",
"type": "ordinal",
"name": "pos",
"domain": {
"field": "position"
}
}
]
}
],
"data": [
{
"values": [
{
"category": "A",
"position": 1,
"value": 1661.0,
"label": 40.0
},
{
"category": "A",
"position": 2,
"value": 2928.0,
"label": 35.0
},
{
"category": "A",
"position": 3,
"value": 9010.0,
"label": 69.0
},
{
"category": "A",
"position": 4,
"value": 6459.0,
"label": 97.0
},
{
"category": "B",
"position": 1,
"value": 1022.0,
"label": 39.0
},
{
"category": "B",
"position": 2,
"value": 1185.0,
"label": 33.0
},
{
"category": "B",
"position": 3,
"value": 567.0,
"label": 60.0
},
{
"category": "B",
"position": 4,
"value": 759.0,
"label": 84.0
}
],
"name": "table"
}
]
}