如何在D3中繪製垂直文本作爲標籤

我正在嘗試爲我正在工作的熱圖繪製垂直標籤。我使用的是http://bl.ocks.org/tjdecke/5558084的示例。這裏是我已經改變的代碼的一部分：如何在D3中繪製垂直文本作爲標籤

var timeLabels = svg.selectAll(".timeLabel") 
    .data(ife_nr) 
    .enter().append("text") 
    .text(function(d) { 
     return d; 
    }) 
    .attr("x", function(d, i) { 
     return (i * gridSize); 
    }) 
    .attr("y", 0) 
    //.style("text-anchor", "middle") 
    //.attr("transform", "translate(" + gridSize/2 + '-5' + ")") 
    .attr("transform", "translate(" + gridSize/2 + '-8' + "), rotate(-90)") 
    .attr("class", function(d, i) { 
     return ((i >= 0) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); 
    });

但它看起來標籤似乎堆放在第一個網格的頂部。如何編輯此代碼以正確顯示標籤？

來源

2016-10-04 TheEmperor

兩個問題：第一，translate應該有一個逗號分隔的值：

"translate(" + gridSize/2 + ",-8), rotate(-90)")

假設-8是用於翻譯的y值。如果沒有逗號，則括號內的值應該是x翻譯（如果未提供y，則假定爲零）。但即使實際上沒有逗號，並且所有gridSize/2 + '-8'只是x值，但仍然存在問題，因爲number加string是string。你必須澄清這一點。

除此之外，要將文本旋轉到中心位置，您必須設置rotate的cx和cy。看看這個演示：

var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", 400) 
 
\t .attr("height", 100); 
 

 
var texts = svg.selectAll(".texts") 
 
\t .data(["foo", "bar", "baz"]) 
 
\t .enter() 
 
\t .append("text"); 
 
\t 
 
texts.attr("y", 50) 
 
\t .attr("x", function(d,i){ return 50 + 80*i}) 
 
\t .text(function(d){ return d}); 
 
\t 
 
texts.attr("transform", function(d,i){ 
 
    return "rotate(-90 " + (50 + 80*i) + " 50)"; 
 
});

<script src="https://d3js.org/d3.v4.js"></script>

來源

2016-10-04 15:22:56

如何在D3中繪製垂直文本作爲標籤

回答

相關問題