尝试使用 d3.js 创建一个简单的条形图。我还提供了一个按钮来创建随机数据,用作 svg 条形图的数据集。但是,svg 中的条形图仅针对第一个数据集呈现。即使我更改了数据集的值,条形图仍然保持不变。需要帮助。
我检查了 Prop ,看它们是否在变化。 Prop 正在更新,但并未更改图表中的条形。
App.js 文件:
class App extends Component {
constructor(props){
super(props)
this.state={
dataSet: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}
}
dataSetCreator = () =>{
let n = Math.ceil(Math.random()*10);
this.setState({
dataSet : [...Array(n)].map(_=>Math.ceil(Math.random()*10))
})
}
render() {
console.log(this.state.dataSet)
return (
<div className="App">
<div className="d3-chart">
<span>Bar Chart With D3</span>
<BarChart
data={this.state.dataSet}
height={500}
width={500}/>
<button onClick={()=>this.dataSetCreator()}>Change Data</button>
</div>
</div>
);
}
}
条形图.js:
class BarChart extends Component{
componentDidMount(){
this.createBarChart();
}
componentDidUpdate(){
this.createBarChart();
}
createBarChart = ()=>{
const svgWidth = this.props.width
const svgHeight = this.props.height;
var svg = d3.select('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.attr('class', 'bar-chart');
debugger
var dataset = this.props.data;
var barPadding = 5;
var barWidth = (svgWidth / dataset.length);
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('y', (d)=>svgHeight-(d*5))
.attr('height', (d)=>d*5)
.attr('width', barWidth-barPadding)
.attr('transform', (d, i)=>{
var translate = [barWidth*i, 0];
return "translate(" + translate + ")"
})
}
render(){
console.log(this.props.data)
return(
<svg>
</svg>
);
}
}
最佳答案
您需要遵循 general update pattern在 createBarChart
createBarChart = () => {
const svgWidth = this.props.width
const svgHeight = this.props.height;
var svg = d3.select('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.attr('class', 'bar-chart');
var dataset = this.props.data;
var barPadding = 5;
var barWidth = (svgWidth / dataset.length);
var rects = svg.selectAll('rect')
.data(dataset)
var rectsEnter = rects.enter()
.append('rect')
.attr('y', (d) => svgHeight - (d * 5))
.attr('height', (d) => d * 5)
.attr('width', barWidth - barPadding)
.attr('transform', (d, i) => {
var translate = [barWidth * i, 0];
return "translate(" + translate + ")"
})
rects.attr('y', (d) => svgHeight - (d * 5))
.attr('height', (d) => d * 5)
.attr('width', barWidth - barPadding)
.attr('transform', (d, i) => {
var translate = [barWidth * i, 0];
return "translate(" + translate + ")"
})
rects.exit().remove();
}
此外,我在 stackblitz 中遇到 Array.map 无法处理 [...Array(n)]
的问题,因此不得不更改 dataSetCreator
(我不是确定这是否适用于您的环境)。
dataSetCreator = () => {
let n = Math.ceil(Math.random() * 10);
let newData = Array.from({ length: n }, () => Math.floor(Math.random() * 39));
this.setState({
dataSet: newData
})
}
stackblitz
关于reactjs - Chart 中的 SVG 在 Prop 更改后不会重新渲染。 react + d3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54141750/