Path To Polyline

HTML

<div id='myDiv'></div>

<script type="text/javascript">
  var canvas = d3.select('#myDiv')
    .append('svg')
    .attr('width', '1000px')
    .attr('height', '1000px');
  var polyline = canvas.append('path')
    .attr('d', 'M100 100 l400 0 l0 400 l-400 0 l0 -400  Z')
    .attr('fill', 'none')
    .attr('stroke', 'blue')
    .attr('stroke-width', '2');

  var polylinesArray = convertPathToPolyline(polyline);
  console.log(polylinesArray);



  function convertPathToPolyline(path) {
    var me = this;
    var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
    var convertedLinesArray = new Array();
    var pathSegList = path[0][0].pathSegList;
    var lastPoint = svg.createSVGPoint();

    for (var i = 0; i < pathSegList.length; i++) {
      var pathSeg = pathSegList[i];
      var pathSegType = pathSeg.pathSegType;
      var pathSegX = pathSeg.x;
      var pathSegY = pathSeg.y;
      switch (pathSegType) {
        case SVGPathSeg.PATHSEG_MOVETO_ABS:
          lastPoint.x = pathSegX;
          lastPoint.y = pathSegY;
          break;

        case SVGPathSeg.PATHSEG_MOVETO_REL:
          lastPoint.x += pathSegX;
          lastPoint.y += pathSegY;
          break;

        case SVGPathSeg.PATHSEG_LINETO_ABS:
          var nextpoint = svg.createSVGPoint();
          nextpoint.x = pathSegX;
          nextpoint.y = pathSegY;
          convertedLinesArray.push(me.getPolyline(lastPoint, nextpoint));
          lastPoint = nextpoint;
          break;

        case SVGPathSeg.PATHSEG_LINETO_REL:
          var nextpoint = svg.createSVGPoint();
          nextpoint.x = lastPoint.x + pathSegX;
          nextpoint.y = lastPoint.y + pathSegY;
          convertedLinesArray.push(me.getPolyline(lastPoint, nextpoint));
          lastPoint = nextpoint;
          break;

        case SVGPathSeg.PATHSEG_CLOSEPATH:
          break;

      }
    }

    return convertedLinesArray;

  }

  function getPolyline(startPoint, endPoint) {
    var me = this;
     var polyline...