SVG 요소를 개별적으로 확장하는 방법.

Question

D3에서 그래프를 만들고 있는데, 그래프의 Y 축의 축척을 의의 요소 크기를 조정하지 않고 크기를 조정하려고했습니다. (그리고 나는 그래프를 다시 그려야 할 필요가 없다).

다른 말로하면, SVG를 사용하여 객체의 크기를 변경하지 않고 객체 사이의 거리를 조절할 수 있기를 원합니다.

this article의 마지막 부분을 읽고 내가 할 수있는 것처럼 보이지만, 세부 사항을 올바르게 얻을 수없는 것 같습니다. 여기

는 내가 뭘하려고 오전의 단순화 codepen입니다 : https://codepen.io/thesuperuser/pen/BmdNwz/

<symbol id="circle" width="20" height="20" preserveAspectRatio="none"> 
    <circle cx="10" cy="10" r=10></circle> 
</symbol> 

후 나는이 기호를 사용하고, 시도하고 D3와 심볼의 크기를 유지

let svg2 = d3.select('svg.scaled') 
svg2.selectAll('use') 
    .data(data) 
    .enter() 
    .append('use') 
    .attrs({ 
    class: 'circle', 
    href: '#circle2', 
    x: d => scale(d), 
    y: '50%', 
    height: dotR*2, 
    width: dotR*2, 
    }) 

이것은 첫 번째 예제에서 동작을 복제하는 것처럼 보입니다.이 동작은 viewBox 및 preserveAspectRatio이 동작하는 방식으로 크기와 거리를 모두 조절합니다.

Answer 1

svg 요소에 대한 viewBox를 설정하면 뷰포트에 맞게 모든 내용을 포함하는 해당 viewBox의 크기를 조정합니다. 당신이 원하는 것은 정반대입니다. 콘텐츠 위치 지정이 다를 수 있지만 아무것도 조정되지 않는 svg 요소입니다. 이것의 핵심은 상대적 (백분율) 단위입니다. SVG 변화의 폭은, 사용하는 소자의 뷰포트가 변경 폭

<svg width="100%" height="200"> 
    <symbol viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet"> 
    <circle id="circle" cx="10" cy="10" r="10" /> 
    </symbol> 
    <use xlink:href="#circle" x="5%" y="50%" width="10%" height="20" /> 
    <use xlink:href="#circle" x="15%" y="50%" width="10%" height="20" /> 
    ... 
</svg> 

이러한 방식으로, 그러나 그들의 높이 : 여기

가 작동 패턴이다. 그 안에 렌더링 된 원은 일정한 높이에 맞춰집니다 (뷰포트가 높을 때보다 넓음). preserveAspectRatio="xMid..."이고 뷰포트 x 및 은 원 중심을 10 %, 20 %, 가운데로 만듭니다. 필요에 따라 원을 배치하려면이 값을 변경하십시오.

d3으로 시연 할 codepen입니다.