reactjs - 如何使胜利原生光标容器x和y轴线只与图形上的点相交而不与触摸点相交

Question

如何使胜利本机光标容器 x 和 y 轴线仅与图形上的点相交而不与触摸点相交。由于默认情况下可拖动光标与触摸点相交，但我希望可拖动光标必须仅在该点相交无论我在哪里触摸图表，它都只显示图表上与我的触摸点相对应的最近点。

请一些关于如何做到这一点。

Answer 1

这是解决方案：

import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import {VictoryArea,VictoryChart,createContainer,VictoryTooltip,VictoryScatter,VictoryLine } from 'victory-native';
import {range, first, last,maxBy } from 'lodash';
import Svg,{Line} from 'react-native-svg';

const VictoryZoomVoronoiContainer = createContainer( "cursor","voronoi");

const data = range(20,81).map((x) => ({x, y: x*x}));

const findClosestPointSorted = (data, value) => {  
  if (value === null) return null;
    const start = first(data).x;
    const range = (last(data).x - start);
  const index = Math.round((value - start)/range * (data.length - 1));
  return data[index];
};

export default class Chart extends Component {
    componentWillMount()
    {
        this.setState({ymax:maxBy(data,function(o) { return o.y; }).y})
    }

    state = {
        activePoint:null,
        data:data,
        ymax :0
    }
    handleCursorChange(value) {           

    this.setState({
        activePoint: findClosestPointSorted(data, value)
    });
  }

    render() {
        const { activePoint } = this.state;
        const point = activePoint ?
            <VictoryScatter name = "scatter" data={[activePoint]} style={{data: {size: 200,fill:'#ffffff',stroke:'#1bad53',strokeWidth:2} }}/>
          : null;

        return (
            <View>
                <VictoryChart
                    height={300}
                    width={350}
                    containerComponent={
                        <VictoryZoomVoronoiContainer
                        voronoiDimension="x"
                        cursorDimension="x"
                        voronoiBlacklist={["scatter"]}
                        labelComponent={<VictoryTooltip style={{fill:'red'}}  flyoutStyle={{
                        fill:  'rgba(52, 52, 52, 0.8)',}}/>}
                        onCursorChange={(value)=>{this.handleCursorChange(value)}}
                        labels={cursor => {

                            try {

                                return(activePoint.x?`${activePoint.x}, ${Math.round(activePoint.y)}\ndjh`:null)
                            } catch (error) {
                                console.log(error)
                            }
                        }}
                        />
                    }
                 >

            <VictoryArea
            name = "area"
            data={data}
            interpolation="cardinal"
            style={{
            data: { 
                fill: '#1bad53',
                stroke: '#05a543',
                strokeWidth: 2
            }
            }}
            />
             {point}

          {activePoint?<Line  x1= {50} x2="300" y1={250-(200/this.state.ymax)*activePoint.y} y2={250-(200/this.state.ymax)*activePoint.y} stroke="black" strokeWidth="1"/>:null}

        </VictoryChart>
            </View>
        )
    }
}

Answer 2

Echoing on @Rajat Verma's answer, Victory allows you to pass in a cursorComponent prop where you can use your own custom svg Line component (custom color, strokeWidth, etc.)

Additionally, it is useful to note that VictoryCursorContainer does not behave as it should in cases where you are also using the zoomDomain prop from VictoryZoomContainer (cursor will not match up with rendered line when zooming). A solution to this is taking out VictoryZoomContainer and manually filtering your original dataset to mimic the zoom. Hope it helps!

There is a typo in the accepted answer, use: const VictoryCursorVoronoiContainer = createContainer('cursor', 'voronoi'). And don't forget to use voronoiBlacklist prop to exclude items out of your voronoi diagram!