SVGエキスパンドラインverticaly

Question

ストロークダッシュアレイなしでライン垂直をどのように拡張するのですか？それを正しく行う方法を知らない。これは私の例です：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_3" x="0px" y="0px" width="286px" height="286px" viewBox="0 0 286 286" enable-background="new 0 0 286 286" xml:space="preserve"> 
     <line fill="none" stroke="#3AB0F3" id="stroke-dasharray" stroke-width="244" stroke-miterlimit="10" x1="143" y1="0" x2="143" y2="286"/><animate 
       attributeName="stroke-dasharray" 
       from="0, 0" to="143, 143" 
       dur="3s" 
       repeatCount="1"/></line> 
    </svg> 

SVGのプロパティを設定する方法は、ストロークダッシュアライなしに垂直に拡張する方法です。

また、d3チャートのjQueryコードもあります。ここで

var mySVG1 = $('#Layer_3').drawsvg({ 
       duration: 3000 
      }); 

mySVG1.drawsvg('animate'); 

Answer 1

私はD3でそれを行うだろうかです：

d3.select('#lineSelect').transition().duration(1000).attr('y2',700) 

これは、286から700にあなたの高さを変更するだろう。しかし、私は出力として2元の高さを変更した、ここでこれを見てウィンドウが小さい。

実際に見るには、コンテナ、つまり高さを調整するsvgが必要です。当分の間、私はwindow.innerHeightに変更しただけですが、行と同じように更新することができます。

var height = window.innerHeight; 
 

 
d3.select('svg').attr('height', height) 
 

 
d3.select('#lineSelect').transition().delay(500).duration(1000).attr('y2',700) //transition height after half a second

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="286px" height="286px" viewBox="0 0 286 286" enable-background="new 0 0 286 286" xml:space="preserve"> 
 
    <line id='lineSelect' fill="none" stroke="#3AB0F3" stroke-width="244" stroke-miterlimit="10" x1="143" y1="0" x2="143" y2="2" /> 
 
</svg>

フィドル：https://jsfiddle.net/thatOneGuy/27u7g3dt/2/