如何在 d3 中垂直设置每个文本标签？答案

【问题标题】：How can i set each text label vertically in d3?如何在 d3 中垂直设置每个文本标签？
【发布时间】：2021-11-02 19:34:49
【问题描述】：

请看一下。在搜索stackoverflow之后，我觉得我就在附近。但仍然可以垂直设置每个标签（它的日期），因此它是可读的。

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

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

您只需稍作调整即可实现这一目标。除了设置x 和y 属性，我们可以将其添加到transform。所以我们将物体移动到我们想要的位置，然后旋转它。

即：

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

在添加之前删除 x 和 y 行。

这将显示与条重叠的文本。要将文本放在栏上方，我们只需添加：

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

您还可以更改字体大小，以确保文本不会与其他文本重叠：

text {
    font-size: 12px;
}

最终结果是：

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>

【讨论】：

非常感谢。在 FCC 执行任务。有时只想放下一切。但是你们在这里很棒