У меня есть гистограмма, созданная с помощью d3.js, и я пытаюсь отобразить тег изображения для каждого тика по оси x.Например,
class Test extends Component {
constructor(props) {
super(props);
this.state = {
data: null
}
this.renderAxis = this.renderAxis.bind(this);
}
componentDidMount() {
this.setState({
data: [
{
name: 'hello',
imgUrl: 'https://img.com/someImageUrl',
value: 100
},
{
name: 'ola',
imgUrl: 'https://img.com/someImageUrl2,
value: 50
}
]
})
}
componentDidUpdate(){
this.renderAxis();
}
renderAxis() {
this.x.domain(this.state.dummyData.map( d => d.name )) // <-- this one works
this.x.domain(this.state.dummyData.map( d => {
return (
<img src={d.imgUrl} style={{'width': '30px'}}/>
)
})); // <-- this one does not work
this.y.domain([0, 100]);
...
Итак, выше приведен мой код, и я считаю, что вы уже знаете, что я пытаюсь сделать.Я подумала, что я буду рендерить изображение вместо обычного текста в виде меток, но ... Как мне отрисовать этот тег изображения в этом случае? ..