d3 - Поворот текстовых элементов в массиве

Question

Я пытаюсь использовать selectAll («text») в d3 для добавления массива строковых значений (называемых «данными») на мой график. Я хочу, чтобы каждая отдельная точка данных была повернута в точке, в которой она помещена, и определяется здесь как (i * (ширина/длина данных) + 8, 170). Тем не менее, он в настоящее время вращает весь массив, как одну длинную строку, с первым элементом в точке (x, y), которую я установил. Как я могу соответствующим образом применить поворот перевода для поочередного вращения каждого элемента?

new_svg.selectAll("text") 
      .data(data) 
      .enter().append("text") 
      .attr("x", function(d, i) { 
      return i * (width/data.length) + 8; 
      }) 
     .attr("y", function(d) { 
      return 170; 
     }) 
     .attr("dx", -barWidth/2) 
     .attr("text-anchor", "middle") 
     .attr("style", "font-size: 12; font-family: Garamond, sans-serif") 
     .text(function(d) { return d;}) 
     .attr("transform", function(d) { 
      return "rotate(45)" 
     }); 

Answer 1

В массиве было несколько текстовых элементов, которые я смог проверить. Оказывается, проблема связана с установкой элементов x и y отдельно от трансляционного преобразования. Предлагаемое здесь решение работало для меня: d3 x axis labels outputted as long string