Por favor échale un vistazo. Siento que estoy en algún lugar cerca, después de buscar stackoverflow. Pero aún puede configurar cada etiqueta (su fecha) verticalmente para que sea legible.
https://codepen.io/DeanWinchester88/pen/XWgjjeW
const svg = d3.select("body") .append("svg") .attr("width",w) .attr("height",h) .attr("style", "outline: thin solid red;"); svg.selectAll("rect") .data(dataSet) .enter() .append("rect") .attr("x", (d,i) => i * 10) .attr("y", (d) => ( h - (d[1]/10 ) ) ) .attr("width", 8) .attr("height", (d) => d[1] /10 ) .attr("class", 'bar') .attr("data-date",(d) => d[0]) .attr("data-gdp",(d) => d[1]) .append("title") .text((d) => d) svg.selectAll("text") .data(dataSet) .enter() .append("text") .text((d) => d) .attr("x", (d,i) => i * 10) .attr("y", (d) => ( h - (d[1]/10 ) )) // .attr("transform", "rotate(-5)") .attr('transform', (d,i)=>{ return 'translate( i * 10, (d) => ( h - (d[1]/10 ) )) rotate(125)';}) });Puedes lograr esto con solo un pequeño ajuste. En lugar de establecer el atributo x e y , podemos agregarlo a la transform . Así que movemos el objeto a la posición que queremos, luego lo rotamos.
Eso es:
.attr("transform", (d,i) => "translate(" + i*10 + "," + (h-(d[1]/10)) + "),rotate(90)"); Elimine las líneas x e y antes de agregar eso.
Eso mostrará el texto superpuesto con las barras. Para tener el texto encima de la barra, simplemente podemos agregar:
.attr("text-anchor", "end")También puede cambiar el tamaño de fuente para asegurarse de que el texto no se superponga con el otro texto:
text { font-size: 12px; }El resultado final es:
let dataSet; let data; // let pizda =[1,5,8,15,35,76,36, function readTextFile(file, callback) { var rawFile = new XMLHttpRequest(); rawFile.overrideMimeType("application/json"); rawFile.open("GET", file, true); rawFile.onreadystatechange = function() { if (rawFile.readyState === 4 && rawFile.status == "200") { callback(rawFile.responseText); } } rawFile.send(null); } //usage: readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(text){ data = JSON.parse(text); dataSet = data["data"] console.log(dataSet) const w = 3400; const h = 2000; const svg = d3.select("body") .append("svg") .attr("width",w) .attr("height",h) .attr("style", "outline: thin solid red;"); svg.selectAll("rect") .data(dataSet) .enter() .append("rect") .attr("x", (d,i) => i * 10) .attr("y", (d) => ( h - (d[1]/10 ) ) ) .attr("width", 8) .attr("height", (d) => d[1] /10 ) .attr("class", 'bar') .attr("data-date",(d) => d[0]) .attr("data-gdp",(d) => d[1]) .append("title") .text((d) => d) svg.selectAll("text") .data(dataSet) .enter() .append("text") .text((d) => d) .attr("text-anchor", "end") .attr("transform", (d,i) => "translate(" + i*10 + "," + (h-(d[1]/10)) + "),rotate(90)"); }); .bar:hover { fill: black; } .bar { margin: 6px; fill: #a87a44; } text { font-size: 12px; } <html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title id = "title">Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> </head> <body> </body> </html>