일부 차트를 그리기 위해 d3 차트를 사용하고 있습니다.d3을 사용하여 클릭시 x-y 축을 뒤집는 방법
버튼을 클릭하여 내 축을 뒤집을 수있는 무언가를 찾고 있습니다. 즉, 바, 선, 스택 등과 같은 모든 유형의 차트에서 원활하게 작동하는 기능을 찾고 있다고 말한 것입니다.
누구나 이런 멋진 작업을 했습니까?
Here is the sample
http://jsfiddle.net/adityasethi2601/ae5BP/
당신은 또한 당신의 차트 (수직 & 수평 막대 버전)의 두 가지 버전을 그릴 수있는 도움과 유사한이 둘 사이의 "축 플립"버튼을 토글 가시성을함으로써 영향을 달성하십시오.
나쁜 생각이 아니십니까? 나는 축을 뒤집을 수있는 함수를 만들려고 생각하고 있었는데, 바 또는 선 또는 스택이 될 수있는 고유 한 함수를 갖는 것을 의미한다고 말한 적이 있습니다. –
차트를 조심스럽게 정렬하는 경우 SVG Transforms으로 뒤집기를 수행하여 이미지를 회전하고 필요한 경우 새 여백으로 변환 한 다음 수평으로 유지하려는 텍스트를 역 회전 할 수 있어야합니다.
버튼을 클릭하면 전체 이미지에서 CSS rotate transform을 트리거하는 클래스가 SVG 전체에서 토글되도록 클래스를 수정했습니다.
자바 스크립트 :
d3.select("div#chart > svg") ///select the svg
.classed("rotate", function(){
return !d3.select(this).classed("rotate");
//check whether it is currently rotated
//and set it to the opposite
});
CSS :
svg.rotate{
/* rotate the entire image */
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
, 웹 페이지에 포함 할 때와 같은 전체 SVG와 같은 개체를 HTML로 적용하는 CSS의 변환을 (주의)는 SVG 변환과 직접적으로 동일하지 않으므로 텍스트 요소에서 "역 회전"을 수행 할 수 없습니다. SVG 변환을 사용하려면 회전을 적용 할 수있는 <g> 요소에 전체 차트를 래핑해야합니다. 또한 적절한 "회전 중심"좌표를 찾아야합니다. 그렇지 않으면 사물이 (0,0) 원점을 중심으로 회전합니다.
하지만이 정보는 어디에서 시작해야하는지 알려줍니다.
P.S. 필자는 JSFiddle 형식을 적절하게 사용하고 D3을로드하기위한 외부 리소스 옵션을 사용하기 위해 바이올린을 채택했습니다. 향후이 형식을 사용하십시오.
사용 방법은 사용하는 축척에 따라 다릅니다. 원칙적으로 입력 또는 출력 도메인을 역전해야합니다. –
예를 들어 주시면 기쁘게 생각합니다. 기본적으로 x 축은 y가되고 y는 x가되기를 원합니다. 그렇게함으로써 우리는 수평 대신 수직 막대를 볼 수 있습니다. –
오 이런 종류의 플립. 이를 위해 전체 차트를 다시 그려야합니다. 먼저 새 범위로 눈금을 설정 한 다음 바, 선 및 축을 적절한 위치에 그립니다. 나는 어떤 예를 알지 못한다. –