如何在Sunburst图表中实现文本换行显示？

实现方案 #

在Vega中让Sunburst的文本多行显示，核心是利用文本编码对数组的支持，配合字符串拆分函数，并调整布局属性优化显示效果。

具体操作步骤 #

• 拆分文本为多行数组
  使用split函数按指定规则拆分文本为数组，Vega会自动将数组中的每个元素作为单独一行显示。例如：

  "text": {"signal": "split(datum.name, ' ', 2)"}
  

  上述代码会将datum.name按空格拆分，最多生成2行。如果需要按固定字符数拆分，可结合正则表达式：

  "text": {"signal": "split(datum.name, /(?<=.{6})/)"}
  

  这个正则会每6个字符强制拆分一次，适合无空格的长文本。

• 调整文本布局属性
  为了让多行文本在扇形内居中对齐、行间距合理，需要设置以下属性：

  "align": {"value": "center"},
  "baseline": {"value": "middle"},
  "lineHeight": {"value": 1.3}
  

• 适配扇形区域
  如果文本过长超出扇形，可动态调整字号或限制拆分行数：

  "fontSize": {"signal": "datum.depth === 0 ? 16 : 12"},
  "text": {"signal": "slice(split(datum.name, ' '), 0, 2).join('\\n')"}
  

配置示例片段 #

将你的Sunburst文本标记修改为如下结构：

{
  "type": "text",
  "from": {"data": "nodes"},
  "encode": {
    "enter": {
      "text": {"signal": "split(datum.name, ' ', 2)"},
      "align": {"value": "center"},
      "baseline": {"value": "middle"},
      "lineHeight": {"value": 1.2},
      "fill": {"value": "#ffffff"},
      "fontSize": {"value": 12}
    }
  }
}

内容的提问来源于stack exchange，提问作者Denis