1

我正在绘制一个等值线地图，该地图显示了在每个政治管辖区确认 Covid-19 阳性病例的人口比例。与纽约时报本页人均 Mapbox 图形中的示例类似。

我想出了如何自定义图例的几乎所有细节。目前，标签显示shareOfPop为数字。不过，我想为每个标签添加前缀“${shareOfPop} 中的 1”，并为最终标签“${shareOfPop} 中的 1 或更多”添加后缀。

在此处输入图像描述。

我在Observable Notebook中创建了这张地图。

到目前为止我尝试过的事情......

让我们使用自定义图例编码

要指定标签文本：

vl.color()
  .fieldQ('shareOfPop')
  .scale(
    {
      scheme: "yelloworangered",
      domain: [250, 10],
      clamp: true,
    }
  )
  .legend({
    title: "Share of Pop.",
    encode: {
      labels: {text: "1 in ${datum.value}"}
    }
  })

注册自定义格式化程序

我怀疑我是否正确地完成了。

这是我的配置（基于Vega-Lite笔记本简介中的配置）。

vl = {
  const [vega, vegalite, api, tooltip] = await Promise.all([
    'vega@5.13.0',
    'vega-lite@4.14.1',
    'vega-lite-api@0.11.0',
    'vega-tooltip@0.22.1'
  ].map(module => require(module)));

  const options = {
    config: {
      // allow custom format types
      customFormatTypes: true,
      config: {
        view: {continuousWidth: 400, continuousHeight: 300},
        mark: {tooltip: null}
      }
    },
    init: view => {
      // initialize tooltip handler
      view.tooltip(new tooltip.Handler().call);
      // enable horizontal scrolling for large plots
      if (view.container()) view.container().style['overflow-x'] = 'auto';
      // register a custom expression function...am I doing this right???       
      vega.expressionFunction('1inX', function(datum) {
        return `1 in ${datum}`
      })
    },
    view: {
      // view constructor options
      loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets@1/'}),
      renderer: 'canvas'
    }
  };
  
  return api.register(vega, vegalite, options);
}

然后我在定义标记时指定这个自定义格式类型：

vl.color()
  .fieldQ('shareOfPop')
  .scale(
    {
      scheme: "yelloworangered",
      domain: [250, 10],
      clamp: true,
    }
  )
  .legend({
    title: "Share of Pop.",
    formatType: "1inX",
  })
)

这些方法都没有产生任何明显的变化。

4

1 回答 1

4

会在这里回答我自己的问题。

原来 Legend 有一个通用labelExpr属性，允许您指定Vega 表达式来自定义标签。

就我而言，我想总是在前面加上 string "1 in "，并"+"在超过可能的域限制时追加。这是我使用join()andif()函数的方法。

...
vl.color()
  .legend(
    {
      labelExpr: "join(['1 in ', datum.value, if(datum.value >= 250, '+', '')], '')"
    }
  )

此属性未记录在 Legend 中，尽管它适用 于 Axis）。

于 2020-08-06T19:47:11.307 回答