Question

因此，像往常一样，我无法应用在Vega文档中阅读的内容。似乎缺少了几个部分，或者我不知道该怎么读。

问题：我有一个与散点图中的点相对应的文本标记。想象一个红点旁边写着“法拉利”。我想将文本设置为更大的颜色和其他颜色。

如果我转到Vega文档的“标记”部分，则会在其中看到一个有前途的属性：style，然后阅读： Style -表示字符串的字符串或字符串数组应用于商标的自定义样式的名称。样式是配置中定义的标记属性默认值的命名集合。听起来很完美。

然后我继续在config对象中创建以下内容：

config': {
      'axis': {
        'labelColor': '#b5bcc8',
        'labelFontSize': 15,
        'labelFont': '(quatro)',
        'titleColor': '#b5bcc8',
        'titleFontSize': 15,
        'titleFont': '(quatro)',
        'titlePadding': 20,
        'tickColor': '#b5bcc8',
        'domainColor': '#b5bcc8'
      },
      'custom': {
        'textFontSize': 22
      }
}

然后按照建议将此自定义样式应用于文本标记：

{
   'name': 'product_label',
   'type': 'text',
   'from': { 'data': 'salesData' },
   'style': 'custom',
   'encode': {
      'enter': {
         'x': { 'scale': 'x', 'field': 'month', 'offset': 8 },
         'y': { 'scale': 'y', 'field': 'salesTotal', 'offset': -5 },
            'text': { 'field': 'name' },
            'fill': { 'value': 'black' }
        }
      }
  }

当然，我在这里做了很多假设，因为我没有示例。我假设命名集合是一个对象。我假设 textFontSize 是Vega的有效对象属性。但是这些假设可能也是错误的。

Answer 1

好吧，像往常一样，事实证明，我不知道如何阅读文档。所以样式配置就在config部分下面：

https://vega.github.io/vega/docs/config/#style

基本上，我所做的是在文档示例中创建了以下自定义样式：

'style': {
   'custom': {
     'fontSize': 16
    }
 }

...，然后将其应用于我的文字标记，如上例所示。

Vega自定义样式的文本标记

1 个答案: