Missing rects in bar chart - reactjs

Question

I'm new to react and d3. I'm trying our barChart but only see one overlapped rect. Examining each rect element, I see that x, y, height and width are expected. But I don't understand why the other 3 rect are not shown.
BarChart.js
import React, { Component } from 'react'
import { scaleLinear } from 'd3-scale';
import { max } from 'd3-array';
import { select } from 'd3-selection';
export default class BarChart extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
this.createBarChart()
}
componentDidUpdate() {
this.createBarChart()
}
createBarChart = () => {
const node = this.node
const dataMax = max(this.props.data)
const yScale = scaleLinear()
.domain([0, dataMax])
.range([0, this.props.size[1]])
select(node)
.selectAll('rect')
.data(this.props.data)
.enter() // placeholder selection
.append('rect') // return a selection of appended rects
select(node)
.selectAll('rect') // rect selection
.data(this.props.data) // update data in rect selection
.exit()
.remove() // exit and remove rects
select(node)
.selectAll('rect') // rect selection
.data(this.props.data) // join data with rect selection
.style('fill', '#fe9922')
.attr('x', (d, i) => i * 25)
.attr('y', d => this.props.size[1] - yScale(d))
.attr('height', d => yScale(d))
.attr('width', 25)
}
render() {
return (
// Pass a reference to the node for D3 to use
<svg ref={node => this.node = node}
width={this.props.width} height={this.props.height}
>
</svg>
)
}
}
With this answer, I've updated createBarChart() but still seeing the same odd rendering.
createBarChart = () => {
const node = this.node
const dataMax = max(this.props.data)
const yScale = scaleLinear()
.domain([0, dataMax])
.range([0, this.props.size[1]])
this.rects = select(node)
.selectAll('rect')
.data(this.props.data)
this.rects
.exit()
.remove()
this.rects = this.rects.enter()
.append('rect')
.merge(this.rects)
.style('fill', '#fe9922')
.attr('x', (d, i) => i * 25)
.attr('y', d => this.props.size[1] - yScale(d))
.attr('height', d => yScale(d))
.attr('width', 25)
}
App.js
<div>
<BarChart data={[50,10,11,13]} size={[500,500]}/>
</div>

Answer 1

Found the bug, I passed in wrong props, this.props.width and this.props.height doesn't exist in this case. As height of my rect overflows the svg box, I can only see one longest bar, but not the other shorter ones.
<svg ref={node => this.node = node}
width={this.props.size[0]} height={this.props.size[1]}
>
</svg>