使用 Tree Map 的 Vega Chart,文本覆盖在矩形框外

Vega Chart using Tree Map , Texts are overlaying outside of rectangular boxes

使用 VegaCharts-TreeMap 模型,我在这里面临文本被覆盖或超出矩形框的问题。下面的示例代码。 矩形框中的文字可以截断或椭圆,这样文字就不会溢出框外。

https://vega.github.io/editor/#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

通过添加限制键解决了问题,在我的情况下,需要根据条件进行限制,所以我使用了条件 (datum.size<30) 并更新了值。

{
"type": "text",
  "limit":[
    {"test": "datum.size<30 ", "value": 40},
    {"value": 120} 
  ]
}