优化推断通道类型的方法

[pearmini]

优化推断通道类型的方法

目前在 G2 中一共有三种类型的通道：

• field
• transform
• constant

当用户通过 mark.encode 去指定通道值的时候，G2 内部会根据这值去推断通道的类型。

mark.encode('x', 'value');

当指定的值是 number，boolean 或者 function 的时候通道类型是没有歧义的，前两者都是 constant，而后者是 transform。但是如果指定的值是 string 的时候就存在歧义了：可能是 field 通道，也可能是 constant 通道。

mark.encode('color' , 'red'); // 这个 red 可能是最后的颜色，也可能是数据里面的字段。

针对上面的情况，有两种思路：

• 判断这个字符串是不是数据的字段
• 判断这个字符串是不是颜色

是否为字段

第一种思路是 G2 目前采用的使用：判断第一条数据是否有该字段。

function inferType(data, value) {
  return data[0][value] !== undefined ? 'field' : 'constant';
}

这样比较简单，但当数据有缺失的时候，就会出问题了。(参考这个 issue：https://github.com/antvis/G2/issues/4437 ）

const data = [{ b:1 }, { a: 1, b: 2 }];

mark.encode('color', 'a'); // 希望是一个 field 通道，但是会被当成 constant 通道。

针对这种情况，要么就是显示声明通道类型，要么就是判断所有数据。

// 第一种
mark.encode('color', { type: 'field', value: 'a' });

// 第二种
function inferType(data, value) {
  return data.some(d => d[value] !== undefined) ? 'field' : 'constant'
}

这里觉得第二种解决办法好一点：如果数据没有缺失，没有性能损失；如果数据有缺失，性能损失也不大。

是否为颜色

Plot 里面就采用的是判断这个字符串是否为颜色：

function isColor(value) {
 // 一些判断
}

如果 value 既是字段，又是颜色，那么会被认为是颜色。如果希望是字段需要如下去声明：

Plot.mark(data, { color: d => d.red })

同时还需要判断这个 value 是不是形状。

结论

因为判断是否为颜色和形状会相对复杂一点，所以这里建议就判断是否为字段，只不过修改判断方法如下：

function inferType(data, value) {
  return data.some(d => d[value] !== undefined) ? 'field' : 'constant'
}

[hustcc]

如果初始 data 为空，然后网络请求回来之后，再设置数据呢？

mark.encode('color', { type: 'field', value: 'a' });

这种是一直支持的吧？

[pearmini]

嗯嗯，这种是一直支持的

[pearmini]

如果初始 data 为空，然后网络请求回来之后，再设置数据呢？

这个不影响，每次会渲染会根据新的数据去判读通道类型。