D3 x轴形成 [英] D3 x axis Formating

问题描述

我想用更多的填充和空间格式化x轴文本，我不能实现这一点。实际文本大约6-7个字符长，但它只显示3.任何指导将是非常有用的。下面是代码和截图的摘录：

  svg.append（g）
 .attr class，x axis）
 .attr（transform，translate（0，+ height +））
 .call（xAxis）
 .selectAll文本）
 .attr（transform，rotate（90））; 
  

d3 bar chart

解决方案

旋转文字时，设置 x 和 y 。此外，更改 text-anchor 是一个好主意。像这样：

  svg.append（g）
 .attr（class，x axis ）
 .attr（transform，translate（0，+ height +））
 .call（xAxis）
 .selectAll（text）
 .attr（y，0）//调整这个值
 .attr（x，10）// tweak this value 
 .attr（dy，.35em）//调整此值
 .attr（transform，rotate（90））
 .style（text-anchor，start）; 
  

检查演示：

< prevalue（body）.append（svg）.attr（width，400） .attr（height，100）; var data = [foo，bar，baz，foobar，foobaz]; var scale = d3.scaleBand ]）.domain（data）; var axis = d3.axisBottom（scale）; var gX = svg.append（g）.attr（class，x axis）.attr（transform，translate（0,30）调用（轴）.selectAll（text）.attr（y，0）//调整这个值.attr（x，10）//调整这个值.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>  

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. Any guidance would be really helpful. 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 bar chart

解决方案

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

Check the demo:

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屋！