D3 y-Achse-Etikettsposition kann nicht eingestellt werden ⇐ JavaScript

[Anonymous]

Ich möchte das y-Achse-Etikett in einem D3-Diagramm vertikal zentrieren. Im Moment habe ich das Etikett oben auf der Y-Achse. Wenn ich versuche, die Y- oder DY -Attribute anzupassen, bewegt sich das Etikett horizontal, nicht vertikal. Ich vermute, dass dies damit zu tun hat, dass das Etikett gedreht wird, aber wenn ich die Rotation kommentiere, verschwindet das Etikett. < /P>

Code: Select all

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());