d3에서 x 축 텍스트 회전

Question

d3 및 svg 코딩을 처음 사용하고 차트의 x 축에 텍스트를 회전하는 방법을 찾고 있습니다. 내 문제는 일반적으로 xAxis 제목이 가로 막 대형 차트의 막대보다 길다는 것입니다. 그래서 텍스트를 xAxis 아래로 (수평이 아닌) 수직으로 회전 시키려고합니다. 나는이 속성 변환 추가하려고했습니다

: .attr를

("변환은", "(180)를 회전")하지만 그렇게 할 때, 텍스트가 모두 사라집니다. 나는 svg 캔버스의 높이를 높이려고 시도했지만 여전히 텍스트를 볼 수 없었습니다.

내가 잘못하고있는 것에 대한 생각은 훌륭합니다. x와 y 위치도 조정해야합니까? 그리고 만약 그렇다면 얼마만큼 (Firebug에서 볼 수있을 때 문제를 해결하기가 어렵습니다).

Answer 1

회전 (180)의 변형을 설정하면 요소 을 텍스트 앵커가 아닌의 원점을 기준으로 회전합니다. 따라서 텍스트 요소에 x 및 y 속성이 설정되어 있으면 텍스트를 화면 밖으로 회전했을 가능성이 큽니다. 예를 들어 시도한 경우

<text x="200" y="100" transform="rotate(180)">Hello!</text> 

텍스트 앵커는 ⟨-200,100 would입니다. 텍스트 앵커가 ⟨200,100 stay에 머물러있게하려면 변형을 사용하여 텍스트를 회전하기 전에 위치를 지정하여 원점을 변경하면됩니다.

<text transform="translate(200,100)rotate(180)">Hello!</text> 

또 다른 옵션은 회전의 원점을 지정할 수 있도록, SVG의 rotate transform에 옵션 CX 및 싸이 인수를 사용하는 것입니다. 이것은 약간 중복되는 끝,하지만 완성도를 들어, 다음과 같습니다

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text> 

Answer 2

뻔뻔하게, elsewhere에서 저자에 대한 모든 신용을 뽑아.

하단 여백을 표시하는 데에만 여백을 넣어야합니다. 이 D3 축 레이블을 회전하는

var margin = {top: 30, right: 40, bottom: 50, left: 50}, 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)"); 

Answer 3

하나의 문제는이 논리를 당신이 축 렌더링 할 때마다 다시 적용해야한다는 것입니다. 축이 틱 및 레이블을 렌더링하는 데 사용하는 enter-update-exit 선택 항목에 액세스 할 수 없기 때문입니다.

d3fc는 decorate pattern이있는 구성 요소 라이브러리로 구성 요소에서 사용되는 하위 데이터 조인에 액세스 할 수 있습니다. 회전 만 입력 선택에 적용하는 것을

var axis = fc.axisBottom() 
    .scale(scaleBand) 
    .decorate(function(s) { 
    s.enter() 
     .select('text') 
     .style('text-anchor', 'start') 
     .attr('transform', 'rotate(45 -10 10)'); 
    }); 

공지 :

그것은 다음과 같이 축 라벨 회전이 수행된다 D3 축에 대한 드롭 여분을 갖는다.

당신은 axis documentation page에이 패턴에 대한 다른 가능한 사용을 볼 수 있습니다.