1

我正在使用 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}
            ]
          }
        }
      }
    }

任何人都可以帮助如何获得所需的结果并了解数据如何从（子）标记传递到该信号？

4

1 回答 1

2

我通过指定三个谓词解决了这个问题，一个谓词检查 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"
    }
  ]
}
于 2016-01-12T23:18:16.850 回答