在Voronoi容器中的选定点上画一条线

Question

我正在使用Victory Graph可视化我的图表。

“我的图表”当前看起来像这样

<View style={container}>
<VictoryGroup 
                 padding={0}
                 height= {200}
                containerComponent={
                            <VictoryVoronoiContainer/>
                          }>
                    <VictoryArea
                        style={{ data: { fill: this.chartColor } }}
                        data={this.coinHistoryData} 
                        domain={{ 
                            y: [this.coinMinimum, this.coinMaximum] 
                        }}
                        labels={(d) => `y: ${d.y}`}
                        labelComponent={
                            <VictoryTooltip   />
                          }

                    />
                    </VictoryGroup>
</View>

以图形方式，您可以将其绘制成这样

[问题：] 现在，我希望它在所选点处具有垂直线。我该如何实现？

Answer 1

在labelComponent上放置一个VictoryVoronoiContainer，以根据x和y的范围绘制一条线：

// the line drawing thing:
const HoverLine = props => {
  const { x, scale } = props;
  const range = scale.y.range();
  return (
    <line
      style={{
        stroke: "#ccc",
        strokeWidth: 1,
      }}
      x1={x}
      x2={x}
      y1={Math.max(...range)}
      y2={Math.min(...range)}
    />
  );
};
// and then use it like so:
// (rest of chart code omitted)
containerComponent={
  <VictoryVoronoiContainer
    labels={d => ' '}
    labelComponent={<HoverLine />} 
  />
}

请注意，您必须将labels放在此处，否则将不会显示该行。