victory-charts - VictoryPie 一次单击单个系列图表

Question

我在 React Native (victory-native) 上使用 VictoryPie。我的目标是能够在 onClick (onPress) 时更改饼图的一片颜色。在任何时候，只有一个切片的颜色应该更改为我的突出显示颜色。

使用 events Prop ，我可以在按下时更改切片的颜色，但无法使用如下代码在单击另一个切片时重置它:

onPress: () => {
  return [
    {
      target: 'data',
      mutation: (props) => {return {style: {...props.style, fill: #000000}}}
    }
}

理想情况下，我想使用额外的 eventKey 属性来为其他切片返回 {style: undefined} 。但是我无法确定如何获取 eventKey Prop 的其他元素数组。 onPress 没有任何说明索引或元素的参数。有没有其他方法可以知道在 onPress 函数中单击了哪个项目？

提前感谢您的帮助!

Answer 1

我也被困在同一件事上。这是我如何解决该问题的代码。希望这对您有所帮助😊。

                    <VictoryPie
                    standalone={false}
                    labelRadius={({ innerRadius }) => innerRadius + 25}
                    labelPlacement={({ index }) => {
                      return "perpendicular";
                    }}
                    labelComponent={
                      <VictoryLabel
                        style={[
                          {
                            fill: Colors.white,
                            fontSize: 15,
                            fontFamily: "Bold",
                          },
                        ]}
                      />
                    }
                    style={{
                      data: {
                        fillOpacity: 1,
                        stroke: Colors.white,
                        strokeWidth: 5,
                        fill: ({ datum, index }) => {
                          let data = emotions.map((item, index) => {
                            return item;
                          });
                          if (
                            selectedEmotion.emotion === data[index].emotion_name
                          ) {
                            return "tomato";
                          }
                          return data[index].background_color;
                        },
                      },
                    }}
                    events={[
                      {
                        target: "data",
                        eventHandlers: {
                          onPressOut: () => {
                            return [
                              {
                                target: "data",
                                mutation: (props) => {
                                  let { x, description, id } = props.datum;
                                  setSelectedEmotion({
                                    emotion_id: id,
                                    emotion: x,
                                    description: description,
                                  });
                                },
                              },
                            ];
                          },
                        },
                      },
                    ]}
                    data={EmotionsData}
                    width={450}
                    height={450}
                    colorScale={graphicColorData}
                    innerRadius={100}
                  />

---