d3.js - deck.gl 中的图例

Question

我想知道是否可以从 deck.gl 层访问聚合数据以绘制图例。

因为提供了配色方案，所以我只需要 screengrid 层计算的聚合值的范围就可以将其添加到图例中。

我知道有工具提示，但在某些情况下，访问这些值会很好。

Answer 1

我正在使用 HexagonLayer，对于那个，您可以在初始化图层时使用半自定义 onSetColorDomain 函数找到图层的值。然后将域范围数组保存到变量并调用生成图例函数。

例如：

        const hexlayer = new HexagonLayer({
          id: 'heatmap',
          pickable: true,
          colorRange: COLOR_RANGE,
          data:  feats_obj.coords_array,
          elevationScale: 9,
          extruded: true,
          radius: 300,
         getColorValue: points => {
            if( points.length > max_points) {
              max_points = points.length
            }
            renderCategories( incident_categories )
            return points.length
          },
          onSetColorDomain: (ecol) => {
            console.log('color domain set', ecol)
            max_span.innerHTML = ecol[1]
            color_domain = ecol;
            create_legend()

          //  console.log('max_points: ', max_points)
          },...
        })

我想出的骇人听闻的方法是在初始化图层之外的多边形全局变量中创建一个最大点，并让它在任何时候有一个多边形中的点多于该最大值时更新该值。它在野外的一个例子是：https ://mpmckenna8.github.io/sfviz/?start_date=2020-05-01&end_date=2020-05-31带有一个你可以在那里破解的repo的链接。