d3 x轴文字 旋转显示

背景：

      为了让x轴文字多的情况下，不挤在一起显示，那么要实现x轴文字旋转显示，效果如图：

实现方法：

//定义x轴
          let xAxis = d3.axisBottom(xScale)

          //添加x轴
          let xaxisg = svg.append("g")
            .attr("class", "xaxis")
            .attr("transform", "translate(" + "0 ," + height + ")")
            .call(xAxis)
            .selectAll("text")
            .style("font-size", "14px")
            .style("text-anchor", "start")
            .attr("transform", "rotate(45 -10 10)");

这是以文字的起点开始旋转，还可以以文字的最后一个字为基准旋转，实现方法：

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");

两种都可以～任你选择！～

参考链接