Невозможно отрегулировать позицию оси D3 Y ⇐ Javascript

[Anonymous]

Я хочу вертикально сосредоточить этикетку о оси Y на графике D3. Прямо сейчас у меня есть этикетка на вершине оси Y. Когда я пытаюсь отрегулировать атрибуты Y или DY, метка перемещается горизонтально, а не по вертикали. Я подозреваю, что это связано с повернутой меткой, но когда я комментирую вращение, этикетка исчезает. < /P>



const width = 1140;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 50;
const marginLeft = 70;

const x = d3.scaleUtc()
.domain([new Date("2007-01-01"), new Date("2023-01-01")])
.range([marginLeft, width - marginRight]);

const y = d3.scaleLinear()
.domain([0, .5])
.range([height - marginBottom, marginTop]);

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);

svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x)
.ticks(d3.utcYear.every(1))
);

svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width/2)
.attr("y", height - 6)
.text("Year");

svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6) //if I change this value, the label moves horizontally
.attr("dy", ".75em") //if I change this value, the label moves horizontally
.attr("transform", "rotate(-90)") //if I comment this out, the label disappears
.text("Percent");

svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));

container.append(svg.node());


Подробнее здесь: https://stackoverflow.com/questions/797 ... l-position