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

【问题标题】：d3 - Rotate text elements in an arrayd3 - 旋转数组中的文本元素
【发布时间】：2013-11-07 03:06:10
【问题描述】：

我正在尝试使用 d3 中的 selectAll("text") 将字符串值数组（称为“数据”）添加到我的图表中。我希望将每个单独的数据点旋转到它所在的点，此处定义为 (i * (width/data.length) + 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)"
        });

【问题讨论】：

这听起来好像实际上只有一个 text 元素。您是否确认实际上有多个 text 元素？

标签： javascript svg d3.js

【解决方案1】：

数组中有多个文本元素，我能够验证。事实证明，问题出在将 x 和 y 元素与平移变换分开设置。这里提供的解决方案对我有用：d3 x axis labels outputted as long string

【讨论】：