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>