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 bar chart

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>

D3 x轴格式化

1 个答案: