D3 x轴格式

Question

我想格式化x轴文本与更多的填充和空间，我无法做到这一点。实际文本大约有6-7个字符长，但只显示了3个字符。下面是代码的摘录和屏幕截图：

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("transform", "rotate(90)");

d3条形图

Answer 1

当在滴答中旋转文本时，您必须设置x和y。另外，更改text-anchor也是个好主意。就像这样：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("y", 0)//tweak this value
    .attr("x", 10)//tweak this value
    .attr("dy", ".35em")//tweak this value
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

查看演示：

​

var svg = d3.select("body")
	.append("svg")
	.attr("width", 400)
	.attr("height", 100);

var data = ["foo", "bar", "baz", "foobar", "foobaz"];

var scale = d3.scaleBand()
	.range([0, 400])
	.domain(data);
	
var axis = d3.axisBottom(scale);

var gX = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0,30)")
    .call(axis)
		.selectAll("text")
    .attr("y", 0)//tweak this value
    .attr("x", 10)//tweak this value
    .attr("dy", ".35em")//tweak this value
    .attr("transform", "rotate(90)")
    .attr("font-size", 14)
    .style("text-anchor", "start");

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

​