Victory Native Scatter 自定义元素

Question

问题

我正在尝试迁移到新版本的 Victory Native v

^40.0.4

- 我们有一个使用

<VictoryChart><VictoryAxis /><VictoryScatter /></VictoryChart>

的现有散点图。 我们的 Scatter 组件利用

dataComponent

属性来渲染自定义元素。

在迁移到新版本时，新的 Scatter 组件仅限于包括

shape

在内的道具：

type ScatterShape = "circle" | "square" | "star";

这是我们的旧代码：

 <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>

呈现出这样的效果：

现在，新版本 VictoryNative 的新代码如下所示：

<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 渲染自定义元素？

Answer 1

我不认为该库的新版本可以简单地替换您正在寻找的内容。然而，新版本基于 React Native Skia，因此只需使用 Skia 创建组件即可让您创建您想要的内容。

看看<Scatter />组件的

实现

，并没有那么复杂，可以作为参考来创建自己的！