I need help with my PR – splitting the x-axis of svg (d3) into two separate lines cuts off text and is misaligned

[Anon_0000]

This request is about Break x axis of answer buttons table into two rows by GithubAnon0000 · Pull Request #3952 · ankitects/anki · GitHub.

Goal

The goal is to split the text (e.g. “Learning”) and the percentage into to separate rows. I managed to do that but there are two problems:

1. The percentage text is misaligned. It should be centered instead.
2. The percentage text is cut off, but shouldn’t be.

Possible causes

#1
I assumed the problem with #1 is how I align the percentage. I did that with

tspan2.setAttribute("dx", "-4em"); // i realized it works. It's probably a coincidence and a hack

But I’m not sure what do use instead of this, so that the alignment is perfectly centered. It also must work with localization, which might have much longer or shorter strings.

#2
Here I assumed the problem is me using a setTimeout() function. I couldn’t figure out how to do the same without a timeout though, because the text (“Learning”, …) is only available after a timeout. I also apparently cannot feed linebreaks or html into the .tickFormat() function of line 136.

---

Help and advice is much appreciated!

[llama]

@Anon_0000

Here I assumed the problem is me using a setTimeout() function

If the axis transition is removed, there probably won’t be a need for that. I don’t think anyone’s going to notice it given the placement of the buttons graph and the timing (600ms)

[Anon_0000]

Thank you, that indeed solved issue #2.

Do you maybe have an idea regarding #1 as well?

Current commit / code: Break x axis of answer buttons table into two rows by GithubAnon0000 · Pull Request #3952 · ankitects/anki · GitHub

Edit: But why does the axis transition cause this issue?
Edit 2: Turns out all I had to do to solve #1 was to use “x” instead of “dx”. #1 is solved now (see Break x axis of answer buttons table into two rows by GithubAnon0000 · Pull Request #3952 · ankitects/anki · GitHub).

[Eltaurus]

how about?

tspan2.setAttribute("text-anchor","middle");
tspan2.setAttribute("x", "50%");

[Anon_0000]

@Eltaurus

how about?

If I use this instead of setAttribute("x", "0"); (current solution) then the labels are at the wrong place:

Whereas with the commit I just passed (setAttribute("x", "0");) the graph looks like this: