https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

ичок в этом d3.js. Здесь я пытаюсь нарисовать гистограмму, используя библиотеку d3.v3.js. Здесь я сталкиваюсь с несколькими проблемами. Я попытался включить метки измерения на оси Y. Но как только я трансформирую метки на -90 градусов, его положение автоматически меняется.

Вот код, который я привык рисовать:

    svg.append("g")
    .attr("id","x_axis")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")  
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");
    // .attr("transform", "translate(" + bandSize + ", 0)")

    svg.append("g")
    .attr("class", "x axis")
    .attr("id","dimLabel")
    .append("text")
    .style("text-anchor", "end")
    .attr("x", width/2)
    .attr("y", height+55) 
    .text(dimensionLabels[0]);




    svg.append("g")
    .attr("id","y_axis1")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("class", "label")
    //.attr("transform", "rotate(-90)")
    .attr("y", function(d){return y(d3.max(data, function(d) { return d.Metric1; }));});


    //Measure Labels
    svg.append("g")
    .attr("class", "y axis")
    .attr("id","measureLabels")
    .append("text")
    .style("text-anchor", "end")
    .attr("x", 0)
    .attr("y", height/2) 
    .text(measureLabels[0]+", "+measureLabels[1])
    .attr("transform", "rotate(-90)");

Выходное изображение:

Любая помощь очень ценится.

 rm418 окт. 2017 г., 21:17
Где вы ожидаете лейбл? Может быть, вы можете попробовать начать вместо конца
 rm418 окт. 2017 г., 20:34
Вы пытались использоватьtext-anchor: middle вместо конца (в части меток измерения)?
 shareef18 окт. 2017 г., 20:33
было бы полезно, если бы вы предоставили больше кода или даже как тидjsfiddle.net/vintharas/0m9raoj4
 Stanly Johns18 окт. 2017 г., 20:43
Спасибо, ребята, за ответ. Извините, это самый первый раз, когда я отправляю запрос на Stackoverflow. Я включу jsfiddle. @ shareef Я пробовал привязку текста: в середине он дает мне тот же результат. Но эта временная позиция немного изменилась @ rm4.
 Stanly Johns18 окт. 2017 г., 21:31
Я ожидаю, что метка будет на левой стороне оси Y. Я перепробовал все strat, end, middle. .attr ("transform", "rotate (-90)") Эта строка меняет положение слева направо. Не могли бы вы помочь мне решить эту проблему?

Ответы на вопрос(2)

Решение Вопроса

rotate функцияtransform Атрибут вращает элемент вокруг начала координат (0,0), а не вокруг его центра.

Самое простое решение - броситьattr("x") а такжеattr("y") и позиционирование текста с использованием того жеtransform:

var width = 300,
  height = 300;
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
var text = svg.append("text")
  .text("Sum (sales), Sum (quantity)")
  .attr("text-anchor", "middle")
  .attr("transform", "translate(20," + (height / 2) + ") rotate(-90)")
svg {
  border: 1px solid gray;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

Другое решение - установить центрrotate в то же самоеx а такжеy ценности:

var width = 300,
  height = 300;
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
var text = svg.append("text")
  .text("Sum (sales), Sum (quantity)")
  .attr("text-anchor", "middle")
  .attr("x", 20)
  .attr("y", 150)
  .attr("transform", "rotate(-90, 20, 150)")
svg {
  border: 1px solid gray;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

Ваш ответ на вопрос