我们实际上如何在 react vega 中注册自定义格式化程序？

Question

我已经阅读了很多次文档https://vega.github.io/vega-lite/docs/config.html#custom-format-type。我仍然不明白如何在 react vega 中实现它。最让我困惑的是这个 vega 对象。

view = new vega.View(...);
view.expressionFunction('customFormatA', function(datum, params) {
  ...
  return "<formatted string>";
});

我目前在用 React 做的事情：

import React from "react";
import ReactDOM from "react-dom";
import { createClassFromSpec } from "react-vega";

const spec = {}

const BarChart = createClassFromSpec({ mode: "vega-lite", spec: spec });

export default function TestPage2({ data }) {
  return <BarChart data={{ table: data }} />;
}

是否有任何实现自定义格式类型的示例可供我学习？

Answer 1

文档中有错误，pull request 已提交。

您应该使用 vega 而不是 vega.View，如下所示：

import { expressionFunction } from 'vega';
expressionFunction('customFormatA', function(datum, params) {
  return datum;
});

但是请注意，自定义格式不适用于合并； an issue 已为此打开。

我们实际上如何在 react vega 中注册自定义格式化程序？

How do we actually register a customised formatter in react vega?

vega-lite

vega