CODEWITHSUNDEEP
react-native
HelenChen
HelenChen

Reputation: 1

Error while updating property ‘d’ in shadow node of type:RNSVGPath

https://github.com/FormidableLabs/victory-native It is normal to use the bar chart for the first time and fill in the data, but when changing the data to update the bar chart, it is always wrong to update the bar chart. Please give us some solutions.

PS: try using the following method to solve: 1. Check whether the victory-native Path code is up to date. Check the Internet, it's up to date; 2. Determine whether the filled data is empty. It has been verified that the data is not empty and the data is updated, but the bar chart is not redrawn.

render() {
return (
<PollutantcodeBarRank style=
{{width:SCREEN_WIDTH,backgroundColor:'#ffffff',position:'absolute',top:0}}/>
 {
 this.props.ishow?{'正在加载中'}:<VictoryChart
 style={{
 parent: {
 justifyContent:'center',
 alignItems:'center',
 marginTop:20,
 },
borderColor:'red',
borderWidth:1,
}}
height={240} width={SCREEN_WIDTH-10} padding={{ top: 40, bottom: 40, right: 
5, left: 26 }}
containerComponent={
<VictoryVoronoiContainer
width={SCREEN_WIDTH-10}
voronoiDimension="x"
labels={(d) => {
return ${d.chartXValue}\n 值:${d.chartYValue};}}
labelComponent={
<VictoryTooltip
width={SCREEN_WIDTH/2-50}
cornerRadius={0}
flyoutStyle={{ fill: "white"}}/>}
/>}
domainPadding={{ x: 15,y: 15 }}>{
<VictoryBar
alignment="start"
style={{
data: {
fill: (d) => d.chartColor?d.chartColor:'#489ae3',
width: 7,
fillOpacity: 0.9,
strokeWidth: 1
}
}}
data={this.props.chartData}
x={(d) => d.zz}
y={(d) => {
if(d.chartYValue=='---'){
return 0;
}
return d.chartYValue;}}/>
}
<VictoryAxis
theme={VictoryTheme.material}
tickFormat={this.props.radom5}
style={{ axis: { stroke: '#A4A4A4' },
axisLabel: { fontSize: 12, fill: '#000' },
ticks: { stroke: '#A4A4A4',size:5 },
tickLabels: { fontSize: 12, fill: '#999', padding: 5, fontFamily: 
'NunitoSans-Regular'},
}} />
<VictoryAxis
dependentAxis
domain={this.props.YZhou}
tickFormat={(x)=> x }
style={{ axis: { stroke: '#A4A4A4' },
axisLabel: { fontSize: 12, fill: '#000' },
ticks: { stroke: '#A4A4A4' },
tickLabels: { fontSize: 12, fill: '#999', padding: 5, fontFamily: 
'NunitoSans-Regular'},
}}
/>
}
); 
}
}

Upvotes: 0

Views: 2187

Answers (1)

Akhilesh Sinha
Akhilesh Sinha

Reputation: 881

In my case, the reason was the incorrect values from the backend. I was using an API call for the initial values of charts. I was receiving a NaN value for X-axis.

Upvotes: 1

Related Questions