dc.js HeatMap의 X 축 텍스트를 올바르게 회전시키고 정렬하십시오.

Question

X 축에 길이가 다른 여러 문자열이 있으면 어떻게됩니까? 각각의 첫 번째 문자에서 시작하여 그 문자열을 그릴 수있는 방법은 무엇입니까? 내가 사용하면
.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 있다는 것 같다

는 그 설정 "텍스트 앵커"에 "해제"x의 calcul에 영향을 미치는 일 수 있습니다 414,하지만 대신 I'am 그 값을 받고?

편집 :

이 문제를 해결하기 위해이 트릭이 있습니다. 는 .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/