Victory Native v40.0.4迁移：如何为Scatter自定义渲染元素？

问题 #

我正尝试迁移至Victory Native v^40.0.4版本，原有散点图基于<VictoryChart><VictoryAxis /><VictoryScatter /></VictoryChart>实现，通过VictoryScatter的dataComponent属性渲染自定义元素。

新版本的Scatter组件仅支持shape属性，可选值为type ScatterShape = "circle" | "square" | "star";，无法像旧版本那样通过子组件或dataComponent传入自定义元素。

旧代码示例：

<VictoryChart
            domain={{
                x: domainX as DomainTuple,
                y: domainY as DomainTuple,
            }}
            domainPadding={{ x: 10, y: yDomainPadding }}
            height={148} // total height 186 - Victory build in parent padding on top & bottom
            padding={{ top: 0, bottom: 8, right: 48, left: onlyNV ? 0 : 48 }}
            width={chartWidth}
        >
            <VictoryAxis
                dependentAxis
                domain={domainY as DomainTuple}
                maxDomain={ticksValues[ticksValues.length - 1]}
                minDomain={ticksValues[0]}
                style={{
                    axis: { stroke: 'transparent' },
                    tickLabels: {
                        fill: theme.colors.khaki[600],
                        fontFamily: 'Inter_700Bold',
                        fontSize: 10,
                    },
                }}
                tickCount={dataWithNV.length}
                tickFormat={y => {
                    return y === nvYear ? 'N.V.' : y;
                }}
                tickValues={ticksValues}
            />
            <VictoryAxis
                domain={domainX as DomainTuple}
                style={{
                    axis: { stroke: 'transparent' },
                    tickLabels: { fill: theme.colors.primary },
                }}
                tickFormat={() => ''}
            />
            <VictoryScatter
                data={dataWithNV}
                dataComponent={
                    <DataComponent currentWine={currentWine?.Vintage} />
                }
            />
        </VictoryChart>

新代码使用CartesianChart和Scatter组件后，无法渲染自定义子组件：

<CartesianChart
                axisOptions={{
                    font,
                    lineWidth: 0,
                    lineColor: theme.colors.white,
                    tickCount: dataWithNV.length,
                    labelColor: theme.colors.primary,
                    formatXLabel: () => '',
                    formatYLabel: y => {
                        return y === nvYear ? 'N.V.' : y.toString();
                    },
                }}
                data={dataWithNV}
                domain={{ x: domainX, y: domainY }}
                domainPadding={{
                    left: 20,
                    right: 20,
                    top: 10,
                    bottom: 10,
                }}
                xKey="x"
                yKeys={['y']}
            >
                {({ points }) => {
                    return (
                        //👇 pass a PointsArray to the Scatter component
                        <Scatter
                            color="red"
                            points={points.y}
                            radius={10}
                            shape="star"
                            style="fill"
                        >
                            { /* <DataComponent currentWine={currentWine?.Vintage} /> this child component doesn't do anything */ }
                        </Scatter>
                    );
                }}
            </CartesianChart>

请问在该新版本中，如何为Scatter组件渲染自定义元素？

解决方案 #

Victory Native v40+的Scatter组件确实只支持预设形状，无法直接传入自定义组件。但可以利用CartesianChart提供的points数据，手动遍历渲染自定义元素，替代Scatter组件：

1. 移除Scatter组件，直接在CartesianChart的回调中遍历points.y数组，每个点包含x和y的画布坐标
2. 为每个点渲染你的DataComponent，并将点的坐标通过style或者直接传递属性的方式定位
3. 如果需要保留原有的交互逻辑，可以把点的原始数据（比如datum）也传递给自定义组件

修改后的代码示例：

<CartesianChart
    axisOptions={{
        font,
        lineWidth: 0,
        lineColor: theme.colors.white,
        tickCount: dataWithNV.length,
        labelColor: theme.colors.primary,
        formatXLabel: () => '',
        formatYLabel: y => {
            return y === nvYear ? 'N.V.' : y.toString();
        },
    }}
    data={dataWithNV}
    domain={{ x: domainX, y: domainY }}
    domainPadding={{
        left: 20,
        right: 20,
        top: 10,
        bottom: 10,
    }}
    xKey="x"
    yKeys={['y']}
>
    {({ points }) => {
        // 遍历每个散点的坐标和原始数据
        return points.y.map((point, index) => {
            const originalData = dataWithNV[index];
            return (
                <DataComponent
                    key={index}
                    currentWine={currentWine?.Vintage}
                    // 传递点的画布坐标用于定位，translate确保元素居中
                    style={{
                        position: 'absolute',
                        left: point.x,
                        top: point.y,
                        transform: 'translate(-50%, -50%)'
                    }}
                    // 传递原始数据供组件内部使用
                    datum={originalData}
                />
            );
        });
    }}
</CartesianChart>

注意事项 #

• 确保DataComponent能够接收并处理style属性来定位自己，也可以直接把x和y作为props传入组件内部处理位置
• 若需要处理点击等交互，直接在DataComponent上绑定事件即可
• 如果需要保留Scatter的部分默认样式（比如大小、颜色），可以把这些属性传递给自定义组件，在内部实现对应样式

内容的提问来源于stack exchange，提问作者Phil Lucks