How can i set each text label vertically in d3?-CodePudding

Please, have a look. I feel like i'm somewhere near,after searching stackoverflow. But still can set each label(it's date) vertically so it's readable.

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)';})
      
});

CodePudding user response：

You can achieve this with just a little tweak. Instead of setting the x and y attribute, we can add that to the transform instead. So we move the object to the position that we want, then rotate it.

That is:

.attr("transform", (d,i) => "translate("   i*10   ","   (h-(d[1]/10))   "),rotate(90)");

Remove the x and y lines before adding that.

That will show the text overlapping with the bars. To have the text above the bar we can just add:

.attr("text-anchor", "end")

You can also change the font-size, to ensure the text doesn't overlap with the other text:

text {
    font-size: 12px;
}

The final result is:

Show code snippet

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>