d3에서 x 축 텍스트 회전

Question 1

저는 d3 및 svg 코딩을 처음 사용하며 차트의 xAxis에서 텍스트를 회전하는 방법을 찾고 있습니다. 내 문제는 일반적으로 xAxis 제목이 막대 차트의 막대가 넓은 것보다 길다는 것입니다. 따라서 xAxis 아래에서 가로가 아닌 세로로 텍스트를 회전하려고합니다.

변환 속성을 추가해 보았습니다 : .attr ( "transform", "rotate (180)")

하지만 그렇게하면 텍스트가 모두 사라집니다. SVG 캔버스의 높이를 늘리려 고했지만 여전히 텍스트를 볼 수 없습니다.

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

Question 2

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

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

텍스트 앵커는 ⟨-200,100⟩입니다. 텍스트 앵커를 ⟨200,100⟩에 유지하려면 변환을 사용하여 텍스트를 회전하기 전에 위치를 지정하여 원점을 변경할 수 있습니다.

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

또 다른 옵션은 선택적 cx 및 cy 인수를 SVG의 rotate transform 에 사용하여 회전 원점을 지정할 수 있습니다. 이것은 결국 약간 중복되지만 완성도를 위해 다음과 같이 보입니다.

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

Question 3

다른 곳 에서 뻔뻔스럽게 뽑아 냈고 , 모두 저자에게 감사합니다.

하단 여백을 표시하기 위해서만 여백을 포함해야합니다.

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)");

Question 4

이 회전 D3 축 레이블의 한 가지 문제는 축을 렌더링 할 때마다이 논리를 다시 적용해야한다는 것입니다. 축이 눈금과 레이블을 렌더링하는 데 사용하는 enter-update-exit 선택 항목에 액세스 할 수 없기 때문입니다.

d3fc는 장식 패턴 이있는 구성 요소 라이브러리 로 구성 요소에서 사용하는 기본 데이터 조인에 액세스 할 수 있습니다.

축 레이블 회전이 다음과 같이 수행되는 D3 축에 대한 드롭 인 교체가 있습니다.

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

회전은 입력 선택에만 적용됩니다.

축 문서 페이지 에서이 패턴에 대한 다른 가능한 사용을 볼 수 있습니다 .