dc.jsヒートマップテキストの回転方法

Question

x軸のテキストのみを選択して回転する方法！ この例では： http://dc-js.github.io/dc.js/examples/heat.html

したがって、1から20までを選択して回転してください。

私はこの方法で試してみました：

chart 
.selectAll("g.cols.axis > text") 
.attr("text-anchor", "middle") 
.attr("transform", function() { 
    return "rotate(-20)" 
    }) 
.style("fill", "blue"); 

をI'amは全体のX軸およびseparatlyないすべてのテキストを選択しているようです。 塗りつぶしスタイルはうまくいきますが、変形が正しく機能せず、斧が完全に回転しています。

Answer 1

X軸の各テキスト要素をそれぞれの中心の周りに回転させる必要があります。

chart.selectAll('g.cols.axis > text') 
      .attr('transform', function (d) { 
       var coord = this.getBBox(); 
       var x = coord.x + (coord.width/2), 
        y = coord.y + (coord.height/2); 
       return "rotate(-20 "+x+" "+y+")" 
       }); 

chart.render();に呼び出した後、それを行う覚えているか、あなたの選択は空になります：あなたは、回転角度と心のそれと回転

rotate(angle centerX centerY) 

の中心を指定しなければならないことを行うには、あなたが行うことができます

あなたは、これは、を見てみ理由を理解したい場合：https://sarasoueidan.com/blog/svg-transformations/

Here the working code

Answer 2

あなたの探しているものは何ですか？

.cols.axis text{ 
    transform-origin: center; 
    transform: rotateX(-20deg); 
} 

私はそれだけで、チャート上にそれらを移動するので、あなたたいが、上の回転軸だかはわからない - しかし、任意の軸のためにあなただけの回転X/Y/Zを使用することができます！