Javascript 垂直扩展线

问题是如何在不使用笔划数组的情况下展开直线垂直。我不知道怎么做才对。这是我的例子：

<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>

---

以下是我在d3中的做法：

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

这将使你的身高从286变为700。但为了在这里看到这一点，我将原始高度更改为2，因为输出窗口很小

但要真正看到这一点，您需要它的容器，即svg来调整高度。目前，我只将其更改为window.innerHeight，但它可以与行一样进行更新

var height=window.innerHeight；
d3.选择（'svg'）。属性（'height'，height）
d3.select（“#lineSelect”）.transition（）.delay（500）.duration（1000）.attr（'y2'，700）//半秒后的过渡高度

---

请注意，我在行中添加了一个id“lineSelect”。如果您不能添加该行，则只需选择您可以选择的行，例如d3.select（'line'），请记住，如果有多行无法使用，则必须选择所需行的索引

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