如何在Vega中实现文本内容的国际化翻译

问题原因 #

Vega的表达式（包括labelExpr在内的所有expr配置）运行在独立的沙箱环境中，无法直接访问外部的i18next实例，因此你当前的写法无法调用到翻译方法，自然不会生效。

可行方案 #

方案1：预生成翻译映射注入（推荐，性能最优） #

提前在Vega spec外部完成所有需要的文案翻译，将映射关系作为自定义信号传入spec内部即可调用：

1. 外层提前生成翻译映射表

const i18nLabels = {
  TIME: i18next.t('TIME'),
  LATE: i18next.t('LATE')
}

2. 将映射表注入Vega spec的信号列表

spec.signals = spec.signals || []
spec.signals.push({
  name: 'i18nMap',
  value: i18nLabels
})

3. 修改labelExpr直接调用映射值

legend: {
  // 其余原有配置不变
  labelExpr: "datum.value == 'TIME' ? i18nMap['LATE'] : i18nMap['TIME']"
}

方案2：注册全局自定义翻译函数 #

如果有大量动态翻译需求，可以直接给Vega的表达式环境注册自定义翻译方法，所有expr配置都可直接调用：

1. 全局注册翻译函数

import * as vega from 'vega'

// 注册自定义i18n函数到Vega表达式沙箱
vega.expressionFunction('i18n', (key) => i18next.t(key))

2. 修改labelExpr调用自定义函数即可

legend: {
  // 其余原有配置不变
  labelExpr: "datum.value == 'TIME' ? i18n('LATE') : i18n('TIME')"
}

注：以上两种方案对Vega-Lite也完全适用。

内容的提问来源于stack exchange，提问作者Greg-A