weknowinc / react-bubble-chart-d3

React Bubble Chart using D3
MIT License
57 stars 57 forks source link

Having a problem where the text starts at center instead of centered at center. #29

Open ys8672 opened 4 years ago

ys8672 commented 4 years ago

Here is a picture for reference.

bubble chart problem

As you can see, all the text for the bubble charts starts at the middle. The examples I have seen all have text centered at the middle. The code, besides my own data which I passed my own list object in the data parameter, is literally copy + pasted from the example in the README. Also, I did a little debugging and found out this text starting at the middle apparently happened when I put the BubbleChart inside a ReactJS Carousel.Item, but only if the second item onward. But it is also not consistent either. I have no idea what is causing this. If I put it outside a Carousel and other places, the text is centered and it seems almost arbirtrary tbh.

Update #1: I don't know if the problem is on the bubble chart or other components in ReactJS, but when I do a componentDidMount set to true and do not load the chart dynamically, the chart text is centered correctly. When I remove that, the chart text starts at middle. Not sure why it does that.