D3 x轴格式化 [英] D3 x axis Formatting

问题描述

我想用更多的填充和空间来格式化x轴文本，但我无法实现这一点.实际文本长约6-7个字符，但仅显示3个字符.这是代码摘录和屏幕截图:

I want to format the x axis text with more padding and space and I am not able to achieve this. The actual text is around 6-7 characters long, but it is only showing 3. Here is the extract of the code and a screenshot:

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

d3条形图

推荐答案

旋转刻度线中的文本时，必须设置x和y.另外，更改text-anchor是个好主意.像这样:

When rotating the text in the ticks, you have to set the x and y. Also, it's a good idea changing the text-anchor. Something like this:

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轴格式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！