Y轴与错旋转

Question

蜱我有一个D3曲线图，其中x轴蜱这样的：

的代码段，用于做了下面的

    vis.append("svg:g") 
         .attr("class", "x axis") 
         .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' }) 
         .attr("transform", "translate(0," + (height - margin.bottom) + ")")       
         .call(xAxis) 
         .selectAll("text") 
         .attr("y", 0) 
         .attr("x", 9) 
         .attr("dy", "0.35em") 
         .attr("transform", "rotate(120)") 
         .style("text-anchor", "start"); 

的事情是标签不可读。例如，“August”应该以“A”开始，而不是像我附加的图像中的“t”开始。

我试着改变“旋转”的值，即使它没有帮助。

有人可以帮我正确定位标签吗？

Answer 1

而不是旋转120，尝试旋转-40（将text-anchor更改为end）。

以下是演示：

var svg = d3.select("svg") 
 
var scale = d3.scaleBand() 
 
    .range([20, 280]) 
 
    .domain(["foo", "bar", "baz"]); 
 
var axis = d3.axisBottom(scale); 
 
var gX = svg.append("g") 
 
    .attr("transform", "translate(0,50)") 
 
    .call(axis) 
 
    .selectAll("text") 
 
    .attr("transform", "translate(-10,0) rotate(-40)") 
 
    .style("text-anchor", "end");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>