Css dc.js热图如何旋转文本？

如何仅选择和旋转x轴的文本！ 在本例中：

因此，从1到20中选择并旋转它们

我试着这样做：

 chart
 .selectAll("g.cols.axis > text")  
 .attr("text-anchor", "middle")
 .attr("transform", function () {
    return "rotate(-20)"
   })
 .style("fill", "blue");

但似乎我选择的是整个X轴，而不是每一个文本。

---

填充样式可以正常工作，但变换无法正常工作，并且斧头完全旋转

像这样的东西是你想要的吗

.cols.axis text{
  transform-origin: center;
  transform: rotateX(-20deg);
}

---

我不确定这是否是你想要旋转的轴，因为它只是在图表上向上移动它们-但是对于任何轴，你都可以使用rotateX/Y/Z

必须在X轴上围绕其自身中心旋转每个文本元素。为此，必须指定旋转角度和旋转中心

rotate(angle centerX centerY)

记住这一点，您可以：

  chart.selectAll('g.cols.axis > text')
            .attr('transform', function (d) {
                var coord = this.getBBox();
                var x = coord.x + (coord.width/2),
                    y = coord.y + (coord.height/2);
                return "rotate(-20 "+x+" "+y+")"
                });

记住在调用

chart.render（）后执行此操作否则您的选择将为空

如果您想了解原因，请查看：

哦，我明白你的意思了……嗯，似乎css选择器有问题。selectAll（“g.cols.axis>text”）我认为实际上变换原点似乎卡在整个轴的左侧，即使你为每个元素设置了它。看起来你需要以像素为单位单独指定每个元素的变换原点，有趣的东西。应该能够使用循环增加字体大小和坐标，并根据字体大小和坐标进行调整。最好的方法是
.on（'pretransition'，function（chart）{…}）
，至少如果您使用的是2.0 betas。这将在任何渲染或重画后激发。（早期版本中的Renderlet，但那是在转换之后，所以有一个跳转。）谢谢你们两位！它起作用了！我还有一个问题，如果在X轴上有多个不同长度的字符串呢！如何让这些字符串从第一个字符开始绘制？如果我使用.attr（'dy'，'+50'），结果不会很糟糕，但不是期望的结果！因为每个字符串的长度不同。。。chart.selectAll（“g.cols.axis text”）.attr（'dy'，'+50'）.attr（“transform”，function（）{var coord=this.getBBox（）；var x=coord.x+（coord.width/2），y=coord.y+（coord.height/2）；返回“rotate（90”+x+“”+y+）））。样式（“fill”，“blue”）；可以使用“文本锚定”属性对齐文本标签开始''中间''结束'。请看这里：