<svg id="segue" width="54" height="122" viewBox="0 0 54 122">
    <path class="section-count__line" d="M27, 0 L 27, 70 A3, 3 0 0 1 27 110 A3, 3 0, 0, 1 27,70" />
  </svg>

<button id="animate">Animate</button>

.section-count__line {
  opacity: 0;
  stroke: blue;
  stroke-width: 2;
  fill: none;
}

var svg = d3.select('#segue');

var path = svg.select('path');

var totalLength = path.node().getTotalLength();

path.attr('stroke-dasharray', totalLength + ' ' + totalLength)
    .attr('stroke-dashoffset', totalLength);

function animate() {
  path.style('opacity', 1)
    .transition()
    .duration(1000)
    .attr('stroke-dashoffset', 0)   
}

function animateOut() {
  path.attr('stroke-dashoffset', totalLength);
  animate();
 
}

animate();

document.getElementById('animate').addEventListener('click', animateOut, false);