D3 js Стиль метки оси X, выравнивание по левому краю

Question

Есть ли способ выровнять текст по оси X слева? Я пробовал с .attr("text-anchor", "middle") .attr("text-anchor", "end") .attr("text-anchor", "start"), но ничего не работает, я также пробовал с css, но ничего не работает.

так выглядит моя ось X

, и это часть кода, которая рекламирует метки x

// Add X axis
var x = d3.scaleBand()
    .domain(groups)
    .range([0, width])
    .padding([0.5]);
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("text-anchor", "middle")
    .attr("font-size", "55px")
    .attr("y", "-7")
    .attr("x", "-45")
    .attr("transform", "rotate(-90)");

Answer 1

Я не знаю, правильно ли я понял ваш вопрос, но кажется, вы хотите, чтобы текст оси x был ближе всего к самой оси, я прав? Если это вопрос, я думаю, ваша проблема связана с атрибутом text-anchor. Я бы предложил написать .style вместо .attr, чтобы код выглядел примерно так:

.style("text-anchor", "end")

Я предоставлю вам эту ссылку , чтобы вы могли ее прочитать, чтобы вы могли понять подробнее о том, как решить проблему с осью, и я надеюсь, что это поможет.

Если не сработает, дайте мне знать.