Диаграмма Веги с использованием древовидной карты , тексты накладываются за пределами прямоугольных прямоугольников

#charts #vega

Вопрос:

Используя модель VegaCharts — TreeMap , здесь я сталкиваюсь с проблемой, такой как наложение текста или выход из прямоугольного поля . Ниже приведен пример кода. Текст может быть усечен или иметь форму эллипса в прямоугольном поле, чтобы текст не переполнялся из поля.

https://vega.github.io/editor/#/url/vega/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykSArJQBWENgDsQAGhAATONABONHJnaT0AQXEACOAA8kCHABs4OtgDMdmRXERIcOk0gCebBph2W2inTBo4RSRFWBooJBMdWSRMKmkQAHcaWXo0AE4ANgAGGXgaMiw0AWzckBwkWVkacTI0ACZKARkkTzYIGgAvODQQcQkemQ6ycUiINABtUFGEHvQXd08E4kiGOZAIAEcGEJpLVwSmGtk0UBqcJfQIODMoTAS2VXVx1AmN7d39w5qQg6GTcJwapQHoAXQAvuCpNMjOskBAcHA7gAlWLsZarOYARkomRkR3EJ1QZ3EF3u6GCtUGIAQNTQWJkyH0xSGmDgODQ2UoWMhoJkMTikxhs16tnsGJMaxeUxAKXpMhm60sLjsIChZyJ9QVsN6SFGJlcaigED1kUN4RN vNxtNBqNlrN9tt1vGMgqdnE5J50NlRIAzNqRegoJKIGzQqHwyGGGGgtHY4oEu64J6GurfWgACyB9aaMhkExsWbBNSkADCkaCSZCKfJAY2XTmfvSfoAHOm5ahmn0degy0WEAxxHRXABlWwMO4MVVumup1D1jrdNBtrH1DtEvE9oMgAASgWCoQCERMFZj4erHrrQ0baEyAHYsZmN2h7znegBZIJkOAAUVkP6XrWK43suqD3pmfovqgrbvugZDBDgMBAfO64 p26RwSAABCcCYIk9jiOICgQGWtbBACmB-OUc7krBDZgX6Ah s 6FEliZSKr0AAyNQANYACI0GGeogihdGgXMAj3n63oavSDLbusH5IPoABihaJB NRlkss5Xmg9FLnM96tpm2TQWuWGjjAvhsmGAAKsQwK6NEGTBknFOkT6WfWXHoKOFRETUZAACp2NSybzkZt4LpmWKZJZ2ZKb0jxqLSnRohI4lpmx9Ldv5ICaAiSKYKiahsNhep8VW nAagT6eeB2QQZZW6FXqNDIGyOUNZZb4pegv7wiFvUJU1WL3tkHGWfRhVqUOdzqKOcDbCmYl1fO40MVJZlofJDWYYNsqekEOBsC4PWbV6iV5ag9Scb2RWKMErgAJKnYo52Xb4Y1HcZ9LpK2UF3fUimFf2haKB94bfbEv3XYDTUPZm97QfUWrHQJsRwDDZ0XfDiaI4dE1 veAjo35T1419BOYAjbn1Vi-2xa2EG3Qd9TJYVKm2DQ g03D9NE4zW0s2BGPZPtGb3XNT3IqVeoFrjn1CwzUVeuLcwo9LnZ lTO4rWt4gbaLN1NQIzGsQdLFYeFeodBVkjE9tAOoOkD1yTLTF25SjvqLVZv0lubvM k5PQX67VPfb4j xIv6kKmLsh7FWLpxz3sDYVoUESmY2p2BOTZJnetyzuAooC7kdHYVUASKQijhq5Gsru2d3mVh-biI3ze9c2TX3mD4J8iAtgOz4igIEKY uIivRhiWezUTVBzoHK10ANJwGvQfplR8-oGKDgcjIliBCYRI7QkYhN6cIDnzcV8rJKPRQiAigeISaATnAjJ4bZIkoBhj6l6AsDw9x35LzYPfEBkRdQlRRFlNUTUZRwJML0ZIqRkLpnQb0fIhRIEQghD6Qq-R5CuTENOMSR8IoJHHnHSe09XigAPkqGgJgLwyAMDgRM6ABQMAQJQMIl8PRqhIcKdYZgkCkEoR4UI6xj70L9kwmebDejn04YHHhfCQAAEIBFCJEbIMRI8R5DBPAoGedcLoM3UegXw1RQH8iLEgOkxI5CxBQOgchViz4XyvlxKBSs5hvAAMSyVbPUJgJwZBhMyEwJAQJMgJDCekJESSsSpKgJkWQTA4CWFSXATIltsixJAGEywshWyyD9FAVJVSkkJIaVUbISB6ipNkkgJimZUkQSgKjFJcSkBYlkOkdITBsn3jgOkKA2Q kCASUwLJcT0npCQFAVsqSmBQBibIepcSYgxDgJMuJmQo4XNSVka5QyKkxPueUsJYznnpBABI46AMZD2JAI4n4GCXHIHcRMXIDItR lHpSQCrx6iLKkPUWCD0pBPneYVR4GyRz0LnusX5zi5CuKBSCuFUhwUyEhaErkWJmhcipZQWCWJiGMhCHxaUrCsW9DsHcBIlhP7MNAJXXovjxjvxqOGDZpY5iWDGH-EA602DyHvrWKsHjNEYI8dASI6x65Qy5QEgVOpIQyAYDgAUcxQDMmVbq9A h5nvzXqAR l9eiuBtTIfQHSLVP16PoLJtr3X2stSAVwPrIT7zZRSUqXKeX335fMOAMirHv1lfKjxiq HANsGwGq98X5rF6JUywhSDUgCNSa 5r-WeqtS6wN98HVX2dSgkAbra0Bu9Y21wfqH4BqDY2lV2bMSij9q3IttlG4tpMKq0AOb1h2BOCG0Nh8x4GHuGfKNHiY19DlQmmQIqghipoKQNAkqTDXG4SbLdCrPq1okOSKdA70C7huKQI0SAdAADk4BrCkDoTQyh4Hv0iAUDQd7X69BBFe9 iTrgAmIv20D6BaRVDML2jhk6QDTrzaUatbJ9C3q7ZWlK78fCelHLFYBliF63n8QR QqgcH InQAeQqFADFaqKMOJYxi6jjr HsjSEWktOMy2wKA-A9A1KdAACodAAApDGUGtToAA1NEWIgjFNYgAJTttEyMcTIBJMyfk poRzqVNqcwBpoNOn50QiAA

Ответ №1:

Проблема решена путем добавления ключа ограничения , и здесь, в моем случае, требуется ограничение по условию, поэтому я использовал условие (datum.size

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