d3 - 旋转数组中的文本元素

我正在尝试在d3中使用selectAll（"text"）将字符串值数组（称为"data"）添加到我的图形中。我希望每个单独的数据点在放置它的点上旋转，这里定义为（i * （width/data.length） + 8， 170）。但是，它目前正在将整个数组旋转为一个长字符串，第一个元素位于 （x， y） 点 I 设置。如何适当地应用平移旋转来单独旋转每个元素？

  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)"
        });