D3.js设置X轴标签垂直方向后，如何让文本全部置于水平线下方？

嘿，我来帮你搞定这个X轴标签的显示问题！你遇到的情况是因为当设置了writing-mode: vertical-rl和text-orientation: upright后，文本的布局坐标系变成了垂直方向，这时候vertical-align属性已经没法像水平文本那样控制位置了——它的作用逻辑在垂直排版下完全变了。

下面给你两个简单有效的解决方案，任选其一就行：

方法一：用CSS Transform调整文本位置 #

直接修改你的CSS样式，给垂直文本加上向下的平移，把它们拉到X轴水平线下方：

.axisX text{
  text-orientation: upright;
  writing-mode: vertical-rl;
  /* 这里的15px可以根据你的文本长度调整，确保全部落在线下方 */
  transform: translateY(15px);
}

方法二：用D3代码手动调整Tick文本位置 #

在调用轴渲染之后，选中所有的标签文本，调整它们的y属性，让文本向下偏移：

//Append group and insert axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .attr("class","axisX")
  .call(x_axis)
  // 新增这部分代码，调整文本y坐标
  .selectAll("text")
  .attr("y", 15); // 数值按需调整，越大偏移越往下

另外补充个小建议：如果你的标签文本有长有短（比如示例里的"zzzzzzzzzz"），可以适当增大margin.bottom的值（比如从50改成80），给底部留出足够的显示空间，避免文本超出SVG的范围。

这里给你整合了方法二的完整代码，你可以直接用：

<html> 
<head> 
<style> 
.axisX text{
  text-orientation: upright;
  writing-mode: vertical-rl;
}
</style> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
<body> 
<svg width="500" height="500"></svg> 
<script> 
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 80, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var names=["name1","nm2","name3","zzzzzzzzzz"]

// Create scale
var scale = d3.scaleBand().range([0, width]).padding(0.1);
scale.domain([0,1,2,3]);

// Add scales to axis
var x_axis = d3.axisBottom()
  .scale(scale)
  .tickFormat(function(d){ return names[d]; });

//Append group and insert axis
svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + height + ")")
  .attr("class","axisX")
  .call(x_axis)
  .selectAll("text")
  .attr("y", 15);
</script> 
</body> 
</html>

内容的提问来源于stack exchange，提问作者Marbo