D3でラベルとして縦書きのテキストを描画する方法

Question

私が働いているヒートマップの縦書きラベルを描画しようとしています。私はhttp://bl.ocks.org/tjdecke/5558084の例を使用しています。ここで私が変更したコードの一部です：

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

は、しかし、ラベルが最初のグリッドの上に別のトップ1に積載されているように見えるが表示されます。このコードを編集してラベルを正しく表示させるにはどうすればよいですか？

Answer 1

2つの問題：最初に、translateは値を分離するコンマを持っている必要があります。

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

が-8翻訳のためのyの値であると仮定すると。コンマを使用しない場合は、括弧内の値はxになります（yが指定されていない場合はゼロとみなされます）。しかし、実際にコンマがなくても、numberとstringはstringであるため、gridSize/2 + '-8'はまだxの値であっても問題はあります。この点を明確にする必要があります。

さらに、テキストを中心で回転するには、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>