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

【问题标题】：How to make the victory native cursor container x and y axis line only intersect the point on the graph not on the touch point如何使胜利原生光标容器x和y轴线只与图形上的点相交而不与触摸点相交
【发布时间】：2019-07-23 14:04:25
【问题描述】：

如何使胜利原生光标容器x和y轴线只与图形上的点相交而不与触摸点相交。由于default可拖动光标与触摸点相交，但我希望可拖动光标必须相交仅在图表上我触摸图表的点上，它仅显示图表上与我的触摸点对应的最近点。

请一些人告诉如何做到这一点。

【问题讨论】：

标签： reactjs react-native expo formidable victory-charts

【解决方案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>
        )
    }
}

【讨论】：

注意：这种方法假设数据点是等间距的。如果没有，activePoint 会非常不可预测地跳来跳去。
如何改变出现的竖线颜色。我看到出现的水平线被编码为黑色中风。但是垂直的呢？

【解决方案2】：

与@Rajat Verma 的回答相呼应，Victory 允许您传入 cursorComponent 道具，您可以在其中使用自己的自定义 svg Line 组件（自定义颜色、strokeWidth 等）

此外，请注意 VictoryCursorContainer 在您还使用 VictoryZoomContainer 中的 zoomDomain 属性（缩放时光标与渲染线不匹配）的情况下不会按应有的方式运行。解决此问题的方法是取出 VictoryZoomContainer 并手动过滤原始数据集以模拟缩放。希望对您有所帮助！

接受的答案中有错字，请使用：const VictoryCursorVoronoiContainer = createContainer('cursor', 'voronoi')。并且不要忘记使用 voronoiBlacklist 属性将项目排除在您的 voronoi 图中！

【讨论】：