数据标签 selector 方法入参异常

[Song-yi-Tao]

问题描述

Version：5.0 目标：数据量较大，想根据数据源中的标记位过滤数据，实现展示部分 label 的效果。 selector 方法前几次执行的入参是：any[](数据系列), undefined, undefined，后面执行的入参是：数据项、索引、数据系列。

重现链接

No response

重现步骤

此示例是用 demo ”归一化折线图“ 改写的，在 codeSandBox 执行比较卡，就不放链接了 ` import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container", autoFit: true, insetRight: 10, });

let i = 0;

chart .line() .data({ type: "fetch", value: "https://assets.antv.antgroup.com/g2/indices.json", }) .transform({ type: "normalizeY", basis: "first", groupBy: "color" }) .encode("x", (d) => new Date(d.Date)) .encode("y", "Close") .encode("color", "Symbol") .scale("y", { type: "log" }) .axis("y", { title: "↑ Change in price (%)" }) .label({ text: "Symbol", selector: (item, index, data) => { i++; console.log(item, index, data); return item; }, fontSize: 10, }) .tooltip({ channel: "y", valueFormatter: ".1f" });

chart.render().then(() => { console.log(i); i = 0; });

`

预期行为

目前来看 selector 方法会执行多次，次数等于数据系列长度 + 系列个数。 selector 方法应该是只需要执行一次，并且入参是稳定的。另外在 4.0 版本中有一个 useDeferredLabel 用于延迟渲染数据标签，请问 5.0 如何实现相似效果。在数据量比较大时，目前在 5.0 中 plotLabel 耗时巨大

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

No response

[pearmini]

这个地方应该是一个 bug，目前如下写才行：

  .label({
    text: "Symbol",
    selector: () => (item, index, data) => {
      console.log(item, index, data);
      return item;
    },
    fontSize: 10,
  })

应该在这里 https://github.com/antvis/G2/blob/v5/src/runtime/plot.ts#L1349 把 selector 解构出来，直接作为最后的属性，而不是用 mapObject 处理。这里感兴趣提一个 PR 修复吗？

[Song-yi-Tao]

这个地方应该是一个 bug，目前如下写才行：

  .label({
    text: "Symbol",
    selector: () => (item, index, data) => {
      console.log(item, index, data);
      return item;
    },
    fontSize: 10,
  })

应该在这里 https://github.com/antvis/G2/blob/v5/src/runtime/plot.ts#L1349 把 selector 解构出来，直接作为最后的属性，而不是用 mapObject 处理。这里感兴趣提一个 PR 修复吗？

这个使用方式会报错😂