在 Vega 中创建新的配色方案

Question

我发现可以在 Vega (https://vega.github.io/vega/docs/schemes/) 中创建新的配色方案，但我不明白我可以将这个命令放在哪里： vega.scheme('basic', ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']);
谁能帮帮我？

Answer 1

使用来自Schemes docs 的代码：

// Define an interpolator function that maps from [0,1] to colors
function grey(f) {
  var g = Math.max(0, Math.min(255, Math.round(255 * f))) + '';
  return 'rgb(' + g + ', ' + g + ', ' + g + ')';
}

// Register the interpolator. Now the scheme "mygrey" can be used in Vega specs
vega.scheme("mygrey", grey)

一旦注册了方案，就可以使用它了。

// spec is the vega specification
var color_scale = _.filter(spec.scales, function(scale) { return scale.name === 'color' })[0]
color_scale.range.scheme = "mygrey"

// el is the reference to chart container
new vega.View(vega.parse(spec))
  .renderer('svg')
  .logLevel(vega.Warn)
  .initialize(el)
  .hover()
  .run()

在使用mygrey 方案之前

使用mygrey方案后