开启.style('gradient', 'color')之后slider拖动报错, 例子如下

[pearmini]

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

初级任务

任务介绍

以下代码在拖动 Slider 时候报错，期望修复这个问题。

import { Chart } from '@antv/g2';

chart.options({
  type: "line",
  data: [
    {
      area: "东北",
      province: "长春",
      customer: "方先生",
      value: 10000,
      value2: 60000,
    },
    {
      area: "东北",
      province: "辽宁",
      customer: "方先生",
      value: 10000,
      value2: 60000,
    },
    {
      area: "",
      province: "辽宁",
      customer: "方先生",
      value: null,
      value2: null,
    },
    {
      area: "华东",
      province: "上海",
      customer: "林小姐",
      value: 10000,
      value2: 10000,
    },
    {
      area: "华东",
      province: "山东",
      customer: "陈先生",
      value: 40000,
      value2: 160000,
    },
    {
      area: "华东",
      province: "江苏",
      customer: "王先生",
      value: 10000,
      value2: 50000,
    },
    {
      area: "华东",
      province: "江西",
      customer: "成先生",
      value: 10000,
      value2: 30000,
    },
  ],
  encode: {
    x: (x) => `(${x.area}, ${x.province})`,
    y: "value",
    color: "value",
  },
  scale: { color: { type: "linear", unknown: "#fff" } },
  style: { gradient: "color", lineWidth: 2 },
  slider: { x: true },
})

chart.render();

参考说明

可能和 Slider 拖动的时候产生的 null 数据有关系

[li1615882553]

认领

[li1615882553]

定位到错误：当前x轴是point类型的比例尺，Slider拖动后比例尺中只保留当前范围的domain，但是数据中是全部的，所以在用全部数据做映射的时候，导致映射后的数组seriesX产生了NaN，然后在生成渐变色映射到0-100范围的时候，NaN就映射成了undefiend

计算seriesX：

G2/src/runtime/plot.ts

Lines 767 to 789 in aa09cc0

	const visualData: Record<string, any>[] = I.map((d, i) => {
	const datum = {
	points: P[i],
	transform: T[i],
	index: d,
	markKey,
	viewKey: key,
	...(tooltip && {
	title: titleOf(d),
	items: itemsOf(d),
	}),
	};
	for (const [k, V] of Object.entries(value)) {
	datum[k] = V[d];
	if (S) datum[`series${upperFirst(k)}`] = S[i].map((i) => V[i]);
	}
	if (S) datum['seriesIndex'] = S[i];
	if (S && tooltip) {
	datum['seriesItems'] = S[i].map((si) => itemsOf(si));
	datum['seriesTitle'] = S[i].map((si) => titleOf(si));
	}
	return datum;
	});

seriesX映射到0-100，并生成渐变色：

G2/src/shape/utils.ts

Lines 144 to 171 in aa09cc0

	const [min, max] = extent(I, (i) => P[i]);
	// This need to improve for non-uniform distributed colors.
	const p = new Linear({
	domain: [min, max],
	range: [0, 100],
	});
	const percentage = (i) => p.map(P[i]);
	const gradientMode = {
	// Interpolate the colors for this segment.
	between: (i: number) => `${C[i]} ${percentage(i)}%`,
	// Use the color of the start point as the color for this segment.
	start: (i: number) =>
	i === 0
	? `${C[i]} ${percentage(i)}%`
	: `${C[i - 1]} ${percentage(i)}%, ${C[i]} ${percentage(i)}%`,
	// Use the color of the end point as the color for this segment.
	end: (i: number) =>
	i === C.length - 1
	? `${C[i]} ${percentage(i)}%`
	: `${C[i]} ${percentage(i)}%, ${C[i + 1]} ${percentage(i)}%`,
	};
	const gradient = I.sort((a, b) => percentage(a) - percentage(b))
	.map(gradientMode[mode] || gradientMode['between'])
	.join(',');
	return `linear-gradient(${theta}deg, ${gradient})`;

[pearmini]

@li1615882553 那可以把 NaN 过滤掉再生成渐变色吗？