dc.js HeatMapのX軸テキストを正しく回転して整列する

Question

X軸に長さの異なる複数の文字列があるとどうなりますか？それらの文字列を各最初のcharから描画する方法を教えてください。私が使用している場合
.attr('dy', '+50')結果は悪くないが、望ましくない！

chart.selectAll("g.cols.axis text") 
.attr('dy', '+50') 
.attr("transform", function() { var coord = this.getBBox(); 
var x = coord.x + (coord.width/2), 
    y = coord.y + (coord.height/2); 
    return "rotate(90 " + x + " " + y + ")" }) 
    .style("fill", "blue"); 

ここ

実施例である...各文字列の長さの異なるので：jsfiddle.net/5mt77e0o/2名前と値がランダムに生成されていることに注意してください！

Answer 1

は、問題は、私は.style("text-anchor","unset");を与えたときに適切に文句を言わない仕事を変換し、特殊性は、Xということであるようだ

代わりに、これらの値になっI'am：

をそれが "未設定" に "テキストアンカー" を設定すると、xのCalculが影響を与えるということはできますか？

編集：

私はこのトリックを持ってこの問題を解決するために。 は.style("text-anchor", "middle")ので、回転のためにそのxとyが適切に計算することができ、その後、最後にCSSを変更するには、「テキストアンカーを：未設定の」キープ.style("text-anchor", "unset");

chart 
    .selectAll("g.cols.axis text") 
    .style("text-anchor", "middle") 
    .attr("transform", function() { 
    var coord = this.getBBox(); 
    var x = coord.x + (coord.width/2), 
    y = coord.y + (coord.height/2); 
    return "rotate(90 " + x + " " + y + ")" 
    }) 
.style("fill", "blue").style("text-anchor", "unset"); 

Answer 2

以下のコードを試してください。 テキストアンカーにミドル：

はテキストのアンカーを設定解除とSVGの高さを上げます。

chart 
.selectAll("g.cols.axis text") 
.attr("transform", function() { 
var coord = this.getBBox(); 
var x = coord.x + (coord.width/2), 
y = coord.y + (coord.height/2); 
return "rotate(90 " + x + " " + y + ")" 
}) 
.style("fill", "blue").style("text-anchor","unset"); 

右のxの値でなければなりません：

.attr("text-anchor", "middle"); 

http://jsfiddle.net/5mt77e0o/3/