热图中的文字叠加

如何解决热图中的文字叠加

是否可以在可选的热图中覆盖文本

https://vega.github.io/editor/#/examples/vega-lite/selection_heatmap

如果我在可选的热图中绘制了二进制的实际值与预测值的热值图，是否可以将文本作为True Positives，FP，TN，FN覆盖相应的值 并关闭图例

完整代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json","data": {
    "values": [
      {"actual": "Good","predicted": "Bad","count": 6386},{"actual": "Bad","predicted": "Good","count": 1261},{"actual": "Good","count": 24030}
    ]
  },"mark": {"type": "rect","strokeWidth": 2},"encoding": {
    "y": {
      "field": "actual","type": "nominal"
    },"x": {
      "field": "predicted","fill": {
      "field": "count","type": "quantitative"
    },"config": {
    "scale": {
      "bandPaddingInner": 0,"bandPaddingOuter": 0
    }
  }
}

输出类似

是否可以从索引中提取值并馈入计数值

    "url" : {
        "%context%": true,"index": "index","body": {
          "size":1000,"_source": ["modelMetrics"],}
      }  
    "format": {"property": "hits.hits"}
  },

索引所在的地方

        "_source" : {
          "modelMetrics" : {
            "TN" : 110868,"FP" : 6386,"FN" : 1261,"TP" : 24030,}
         }

解决方法

您可以使用Layered chart构造来做到这一点。例如（view in editor）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json","data": {
    "values": [
      {"actual": "Good","predicted": "Bad","label": "FP","count": 6386},{"actual": "Bad","predicted": "Good","label": "FN","count": 1261},"label": "TN",{"actual": "Good","label": "TP","count": 24030}
    ]
  },"encoding": {
    "y": {"field": "actual","type": "nominal"},"x": {"field": "predicted","type": "nominal"}
  },"layer": [
    {
      "mark": {"type": "rect","strokeWidth": 2},"encoding": {
        "fill": {"field": "count","type": "quantitative","legend": null}
      }
    },{
      "mark": {"type": "text","dy": -5},"encoding": {
        "text": {"field": "label","color": {
          "condition": {"test": "datum.count < 10000","value": "black"},"value": "white"
        }
      }
    },"dy": 5},"encoding": {
        "text": {"field": "count","value": "white"
        }
      }
    }
  ],"width": 100,"height": 100
}