dc.js heatmap как повернуть текст?

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 выбор всей оси Х, а не каждый текст раздельно. Стиль заполнения отлично работает, но преобразование не работает должным образом, и топор полностью вращается.

Answer 1

Вы должны повернуть каждый текстовый элемент на оси X вокруг своего собственного центра. Для этого необходимо указания угла поворота и центром вращения

rotate(angle centerX centerY) 

С, что на виду, вы можете сделать:

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(); или ваш выбор будет пустым

Если вы хотите понять, почему это, обратите внимание на: https://sarasoueidan.com/blog/svg-transformations/

Here the working code

Answer 2

Что-то вроде этого, что вы ищете?

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

Я не уверен, если это ось вы хотите повернуть на, так как он просто перемещает их на график - но для любой оси вы можете просто использовать rotateX/Y/Z!