Using D3.js (v4) and React.js How to mark an axis in a simple line diagram?

Question

I am trying to add labels to my line on D3.js using React. I wrote the code below that will display the axis, but the node text is not displayed, but I see it in the DOM in the developer tools.

import React, { PropTypes, Component } from 'react'; import * as d3 from 'd3'; export default class Axis extends Component { static propTypes= { h: PropTypes.number.isRequired, axis: PropTypes.func.isRequired, axisType: PropTypes.oneOf(['x', 'y']).isRequired, } componentDidMount = () => { this.renderAxis(); } componentDidUpdate = () => { this.renderAxis(); } renderAxis = () => { const node = this.axisRef; d3.select(node).call(this.props.axis); // const domain = d3.selectAll('path.domain'); const ticks = d3.selectAll('g.tick'); ticks.select('text').style('font-family', 'Poppins'); ticks.select('text').style('fill', 'black'); } render() { const translate = `translate(0,${(this.props.h)})`; return ( <g ref={(node) => { this.axisRef = node; }} className="axis" transform={this.props.axisType === 'x' ? translate : ''} > <text value={this.props.axisType === 'x' ? 'x axis' : 'y axis'}>Hello world</text> </g> ); } }