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");

事情是标签不可读。例如，“八月”应以“A”开头，而不是像我附上的图像中的“t”一样。

我尝试更改“旋转”值，即使它没有帮助。

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

Answer 1

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

以下是演示：

＆＃13;

＆＃13;

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");

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;