d3 text rotate

背景：项目中用 d3 画的 heatmap 想把横坐标的一组 text 旋转 45deg ...

         遇到的问题： 设置transform会让x轴的text整体都旋转 而不是每个都旋转...

解决办法：

         让每个text旋转的起点为相应的x起点，而不是最左边的起始点

代码如下：

var timeLabels = svg.selectAll(".testLabel")
                  .data(xData)
                  .enter().append("text")
                  .text(function(d) { return d; })
                  .attr("x", function(d, i) { return i * gridSize + 15; })
                  .attr("y", height)
                  .attr("class", 'xText')
                  .style("font-size", "9px")
                  .style("font-weight", "bold")
                  .style("font-family", "Consolas, Monaco, monospace")
                  .style("text-anchor", "start")
                  .attr('transform', (d,i)=>{
                    return 'rotate(45, ' + (i * gridSize) + ' '+ (height) +')'
                  })复制代码

ok～大功告成！

参考链接

参考链接 （360deg)

参考链接 xAxis