我怎樣才能在D3中垂直設定每個文本標簽？ -有解無憂

請看一下。在搜索了stackoverflow之后，我覺得我已經接近了。但還是可以把每個標簽（它的日期）垂直設定，這樣就可以閱讀了。

https://codepen.io/DeanWinchester88/pen/XWgjjeW

。

const svg = d3.select("body"/span>)
  .append("svg")
  .attr("width",w)
  .attr("height",h)
  .attr("style", "outline: thin solid red;");
svg.selectAll("rect")
  .data(dataSet)
  .enter()
       .append("rect"/span>)
       .attr("x", (d,i) =>  i * 10)
       . attr("y", (d) =>  ( h - (d[1] /10 ) )
       .attr("width"/span>, 8)
       . attr("height", (d) =>  d[1] /10 )
       .attr("class"/span>, 'bar')
       .attr("data-date",(d) => d[0] )
       .attr("data-gdp",(d) =>  d[1]
       .append("title"/span>)
       .text((d) =>  d)
  svg.selectAll("text")
       .data(dataSet)
       .enter()
       .append("text"/span>)
       .text((d) =>  d)
       .attr("x", (d,i) =>/span> 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)'/span>;})
      
});

uj5u.com熱心網友回復：

你只需稍作調整就可以實作這一點。我們可以不設定x和y屬性，而是將其添加到transform中。因此，我們將物件移動到我們想要的位置，然后旋轉它。

這就是：

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

在添加之前，洗掉x和y行。

這將顯示出與條形圖重疊的文本。要讓文本在條形圖的上方，我們只需添加：

.attr("text-anchor"/span>, "end"/span>)

你也可以改變字體大小，以確保文本不與其他文本重疊：

你也可以改變字體大小，以確保文本不與其他文本重疊。

text {
    字體大小。12px;
}

最后的結果是：

顯示代碼片段

let dataSet;
let data;
// let pizda =[1,5,8,15,35,76,36,/span>

function readTextFile（file, callback） {
    var rawFile = new XMLHttpRequest（）。
    rawFile.overrideMimeType（"application/json"）。
    rawFile.open("GET", file, true)。
    rawFile.onreadystatechange = function（） {
        if (rawFile.ready ==4 && rawFile.status =="200") {
            callback(rawFile.responseText) 。
        }
    }
    rawFile.send(null)。
}
//useage: 
readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json"/span>, 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"/span>)
       .attr("x", (d,i) =>  i * 10)
       . attr("y", (d) =>  ( h - (d[1] /10 ) )
       .attr("width"/span>, 8)
       . attr("height", (d) =>  d[1] /10 )
       .attr("class"/span>, 'bar')
       .attr("data-date",(d) => d[0] )
       .attr("data-gdp",(d) =>  d[1]       
       .append("title"/span>)
       .text((d) =>  d)
  svg.selectAll("text")
       .data(dataSet)
       .enter()
       .append("text"/span>)
       .text((d) =>  d)
       .attr("text-anchor"/span>, "end")
       . attr("transform", (d,i) =>  "translate("   i*10   ","   (h-(d[1]/10)   "),rotate(90)")。     
});

.bar：hover {
    填充：黑色。
  }
.bar {
  margin: 6px;
  填充。#a87a44;
}
text {
  font-size: 12px;
}

<html> 
<html lang="en"> 
<head>/span>
  <meta charset="UTF-8">/span>
  < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
  <title id = "title"/span>> Document</title> 
<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>/span>  
</head> 
<body> 
  
</body> 
</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320129.html

標籤：

上一篇：如何解決SVG下拉陰影的剪切問題

下一篇：SAS多對多合并