Hi,
I am able to pass all the test but I want to group which is inside SVG with id graph to be centered every time it loads. I tried with margin: auto but not been able to do it.
Here is the link: https://codepen.io/ThePrakashKumar/pen/MWYOaeV
I’m not sure if I get your meaning correctly, but I assume you want to centre the text vertically in each box?
If so:
titles._groups[0].forEach(group=>{
const text = group.children[0];
const height = group.getAttribute('height');
const margin = (height - text.getBoundingClientRect().height/2)/2
text.style.marginTop=margin+"px";
});
is a bit of a hacky solution but it works to align the text inside each box.
There must be another way of iterating over the elements than what I wrote, I couldn’t find much but I didn’t look very hard. There is definitely something simpler.
Was this what you were looking for?
Thanks for replying, but I am not looking to center the text. I want to center the whole g element inside which every elements of Tree Map lives. The id of g element is graph.
Regards!
I didn’t fully read what you were saying. My Bad,
The G is positioned on your line 21:
.attr('transform', translate(0, ${margin.top}))
The 0 is forcing it left.
@pjopn now I have removed line 21 from my js, and added in CSS:
#graph{
display: block;
margin: auto;
}
Instead of this g element does not seems to center.
I don’t use D3, other than working through the challenges so i’m not completely sure. I did try to play with it but I didn’t see the CSS affecting the g element at all. Even if I gave it a background-color: black.
Generally I would use this for line 21:
.attr('transform', translate(${(w-graphWidth)/2}, ${margin.top/2})) which works for Games, but not for the others because they all grow larger then the graphWidth. The legend names break the container.
Only work around I saw was to increase the margins to hold all of the text from the legend;
const margin={top:15, right: 450};
You could change the .attr('transform... during each button click function, but I could not find the width value for the new g element. width & .getBoundingClientRect() didn’t work.
I could be missing something or it could be a D3 thing with how the g element is created.
Hopefully someone else has a better answer for ya. Good luck!
@pjonp I tried to look around to center the g but as you said no CSS is working for g BTW thank you so much for you help, I really appreciate it. 
1 Like
I think one of the reasons the graph is moving is that the size of the legend changes. So, if you move the legend into its own container, you can position that somewhere else. Then remove all the extra margins dotted about the application (set body margin to 0 in css) and set the graph width to the same as the container width.
You can see I haven’t cleared the legend on loading a new graph, but the graph is dead centre. You should do that too.
Is that what you were looking for?
Hi again! @JanShah
I have set different left margin for each case and by that, I was able to center the whole graph to some extent. Probably, it is not the best solution but this project was taking too much time and as it is working fine so I decided to move on with it. BTW thank you so much for your response. I really appreciate it.
Regards!