D3js : 세로로 스트레치하는 방법?</p> <p><img src="https://i.stack.imgur.com/5ZbGD.png" alt="enter image description here"></p> <p>이 나는 ​​수직으로 140 %하여 늘릴 수 알고, 그것을 잘 보이게하려면, 같은 :

Question

나는 등 매우 평면 고위도을 부여받을 위도/경도 투영지도를 가지고

또한, 는 어떻게 SVG 요소 및 D3와 컨텐츠를 스트레치 수 있을까? (기본 SVG가 그 자체로는 좋지 않기 때문에 CSS를 사용할 수 없습니다.) SVG 코드를 늘려서 다운로드 할 수 있어야합니다.

참고 : 온라인 코드 샘플의 경우 India at the moment 그러나 106 %의 스트레치가 필요하지만 같은 아이디어).

Answer 1

SVG 요소는 변형 속성을 설정하여 크기를 조정할 수 있습니다. 따라서 모양의 컨테이너를 가져 가야합니다.

container.setAttribute("transform", "scale(1, 1.4)"); 

변환 가능한 컨테이너가 있어야합니다. <g> 요소. <svg> 요소는 SVG 1.1에서는 변환 할 수 없지만 곧 나오는 SVG 2 사양에 포함됩니다. 지금까지 내가 아는 한 Firefox와 Opera만이 SVG 2의 일부를 지원합니다.

변환 가능한 컨테이너가 없으므로 SVG 1.1 UA를 사용하여 인도지도에서이 작업을하려면 모든 경로 및 텍스트 요소에 변환을 설정할 수 있습니다. <svg> 요소의 아이들이 그렇게 이상

<svg> 
    <path transform="scale(1, 1.4).../> 
    <path transform="scale(1, 1.4).../> 
    <text transform="scale(1, 1.4).../> 
</svg> 

당신은 루프해야 할 것이다.

또는 당신이 할 수 당신은 <svg>의 이상 모든 자식 요소를 반복하고 <g> 요소로 reparent 것

<svg> 
    <g transform="scale(1, 1.4)"> 
    <path .../> 
    <path .../> 
    </g> 
</svg> 

될 것

<svg> 
    <path .../> 
    <path .../> 
</svg> 

즉 계층 구조에 <g> 요소를 삽입합니다 <g> 요소에 대한 변환을 설정하십시오.