Question

我试图在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)"
        });

Answer 1

数组中有多个文本元素，我可以验证它。事实证明，问题来自于将x和y元素与translate转换分开。这里提供的解决方案对我有用： d3 x axis labels outputted as long string

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

1 个答案: