SVG D3 이미지 크기 조정 문제

d3을 사용하여 만든 SVG 이미지가 있습니다. 그것의 부모 div 컨테이너 내에 svg 이미지를 포함하고 싶습니다. 그러나 svg는 상위 div를 넘습니다. 아래 코드는 :SVG D3 이미지 크기 조정 문제

<div id="test" style="{width: 500px; height:500px;}"> 
    <svg></svg> 
    </div> 
    <script> 
    var svg = d3.select("svg"), 
      width = +svg.attr("width"), 
      height = +svg.attr("height"), 
      node, 
      link; 

     svg.append('defs').append('marker') 
      .attrs({'id':'arrowhead', 
       'viewBox':'-0 -5 10 10', 
       'refX':13, 
       'refY':0, 
       'orient':'auto', 
       'markerWidth':13, 
       'markerHeight':13, 
       'xoverflow':'visible'}) 

      .append('svg:path') 
      .attr('d', 'M 0,-5 L 10 ,0 L 0,5') 
      .attr('fill', '#999') 
      .style('stroke','none'); 

</script>

내 d3 그래프는 부모 "test"div를 넘습니다. 부모 컨테이너 내에서 SVG 그래프를 어떻게 제한 할 수 있습니까?

출처

2017-11-29 rampuriyaaa

어떤 버전의 d3을 사용하고 있습니까? 오류없이 실행되도록 코드를 가져올 수 없습니다. JSBin 또는 비슷한 것으로 다시 만드십시오. 또한, 당신은 IE에서 출력 찾고 있습니까? IE는 SVG 스타일링에 문제가 있지만 수정 될 수 있습니다. – elliottregan

정직하게 어디서부터 시작해야할지 모르겠습니다. 제공하신 코드 스 니펫은 내 측면에서 아무 것도하지 못하게하는 많은 문제가 있습니다. 내가 this 희망

당신에게 부모 컨테이너의 크기에 SVG 확장하는 방법에 대한 기본적인 아이디어 제공 :

HTML

<div id="test"> 
    <svg></svg> 
</div>

CSS

#test { 
    width: 500px; 
    height: 500px; 
} 

svg { 
    width: 100%; 
    height: 100%; 
}

JS를

var svg = d3.select("svg"); 
svg.attr('viewBox', '-0 -5 10 10'); 
svg.append('svg:path') 
    .attr('d', 'M 0,-5 L 10 ,0 L 0,5') 
    .attr('fill', '#999') 
    .style('stroke','none');

svg 요소 자체의 크기는 절대 단위 또는 상대 단위를 사용하여 CSS로 설정할 수 있습니다.

viewBox 속성은 SVG 내부 좌표계의 경계를 정의합니다. 벡터 이미지의 내용을 "전체 크기"로 만들려면 SVG의 모든 요소를 포함하는 데 필요한 것보다 커야합니다.

출처

2017-11-29 01:47:28 Arsylum

SVG D3 이미지 크기 조정 문제

답변

관련 문제