SVG D3イメージのサイズ変更の問題

Question

私はd3を使用して作成されたSVGイメージを持っています。私はそれが親のdivコンテナ内にsvgイメージを格納したいと思います。しかし、svgは親divを超えています。以下は私のコードです：

<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グラフは、親「テスト」divを超えています。親コンテナ内のSVGグラフをどのように制限できますか？

Answer 1

正直にどこから始めるべきかわかりません。あなたが提供しているコードスニペットは私の側で何もしないようにする多くの問題があります。

私は 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のすべての要素を格納するために必要以上に大きくすべきではありません。