如何让胜利原生光标容器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 轴线仅与图形上的点相交而不与触摸点相交 point.Since 通过 default 可拖动光标与触摸点相交但我想要可拖动光标必须只与我触摸图形的图形上的点相交,它只显示图形上与我的触摸点相对应的最近点。
请大家告诉我怎么做。
解决方法如下:
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>
)
}
}
呼应@Rajat Verma 的回答,Victory 允许您传入一个 cursorComponent
道具,您可以在其中使用您自己的自定义 svg Line 组件(自定义颜色、strokeWidth 等)
此外,值得注意的是,在您还使用 VictoryZoomContainer 的 zoomDomain
道具的情况下,VictoryCursorContainer 的行为不正常(缩放时光标将与渲染线不匹配)。一个解决方案是取出 VictoryZoomContainer 并手动过滤原始数据集以模拟缩放。希望对您有所帮助!
接受的答案中有错字,请使用:const VictoryCursorVoronoiContainer = createContainer('cursor', 'voronoi')
。并且不要忘记使用 voronoiBlacklist
属性从 voronoi 图中排除项目!
如何使胜利本机光标容器 x 和 y 轴线仅与图形上的点相交而不与触摸点相交 point.Since 通过 default 可拖动光标与触摸点相交但我想要可拖动光标必须只与我触摸图形的图形上的点相交,它只显示图形上与我的触摸点相对应的最近点。
请大家告诉我怎么做。
解决方法如下:
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>
)
}
}
呼应@Rajat Verma 的回答,Victory 允许您传入一个 cursorComponent
道具,您可以在其中使用您自己的自定义 svg Line 组件(自定义颜色、strokeWidth 等)
此外,值得注意的是,在您还使用 VictoryZoomContainer 的 zoomDomain
道具的情况下,VictoryCursorContainer 的行为不正常(缩放时光标将与渲染线不匹配)。一个解决方案是取出 VictoryZoomContainer 并手动过滤原始数据集以模拟缩放。希望对您有所帮助!
接受的答案中有错字,请使用:const VictoryCursorVoronoiContainer = createContainer('cursor', 'voronoi')
。并且不要忘记使用 voronoiBlacklist
属性从 voronoi 图中排除项目!