d3js line graph not showing

Question

I am working on creating a line graph and I am having a rather trivial issue. I am using d3js V4 and the specific code is as follows:

$(scope.container).append($('<svg id="svgimg" width="640" height="350" style="margin-left:auto;margin-right:auto;"></svg>'));
        var mainGroup = d3.select("#svgimg").append("g");
        d3.select("#svgimg").call(d3.zoom().on("zoom",function(){
            mainGroup.attr("transform","translate(" + d3.event.transform.x+","+d3.event.transform.y+") scale ("+d3.event.transform.k+")" );
        }));


        var parseTime = d3.timeParse("%d-%y");
        var svg = $("#svgimg"),
        margin = {top:20,right:20,bottom:20,left:20},
        width = +Number(svg.attr("width")) - margin.left -margin.right,
        height = +Number(svg.attr("height")) - margin.top-margin.bottom,
        g = mainGroup.append("g").attr("transform","translate("+margin.left+","+margin.top+")");
        //console.log(width);
        //console.log(height);
        var n = 2000;
        //  random = d3.randomNormal(0,.2),
        //  data = d3.range(n).map(random);

        var x =d3.scaleTime()
            .domain([new Date(2017,10,1),new Date(2017,10,31)])
            .range([0,width]);
        var y = d3.scaleLinear()
            .domain([0,2000])
            .range([height,0]);
        var line = d3.line()
            .x(function(d,i){return x(parseTime(d.date));})
            .y(function(d,i){return y(Number(+d.distance));});

        g.append("defs").append("clipPath")
            .attr("id","clip")
            .append("rect")
            .attr("width",width)
            .attr("height",height)
        g.append("g")
            .attr("class","axis axis--x")
            .attr("transform","translate(0,"+y(0)+")")
            .call(d3.axisBottom(x))
        g.append("g")
            .attr("class","axis axis--y")
            .call(d3.axisLeft(y))
        g.append("g")
            //.attr("clip-path","url(#clip)")
            .append("path")
            .datum(scope.data)
            .attr("d",line)
            .attr("class","linea");
        svg.innerHTML = svg.innerHTML;

Where scope is an object (this) with a number of components.

Specifically, the line for the line graph is not visible while the side and bottom scales are. Further, upon inspection, the path element has the some associated data and if only I could see it, could begin debugging.

Any info would be greatly appreciated

Edit: The scope.data object contains an array of objects with time,date,distance and stamp fields. The graph "d" attribute is showing an X range from -25000 -> 25000 with a Y value of 155. I should be seeing a horizontal line from left side to right side but this is not happening. Also, I believe the time parsing to be the major culprit. The time value has been temporarily modified to be equal to a UTC datetime string.

Edit: The time is a UTC datetime string similar to: Tue Sep 19 2017 09:33:42 GMT+1000 (AEST) With rows differing by +- 10 minutes

I am currently using the following code: var parseTime = d3.timeParse(d3.timeFormat.utc);

The complete array as from parsed json from browser

results
:
[{time: "Tue Sep 19 2017 09:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"},…] 
0
:
{time: "Tue Sep 19 2017 09:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
1
:
{time: "Tue Sep 19 2017 09:23:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
2
:
{time: "Tue Sep 19 2017 09:13:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
3
:
{time: "Tue Sep 19 2017 09:03:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
4
:
{time: "Tue Sep 19 2017 08:53:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
5
:
{time: "Tue Sep 19 2017 08:43:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
6
:
{time: "Tue Sep 19 2017 08:33:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
7
:
{time: "Tue Sep 19 2017 08:23:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}
8
:
{time: "Tue Sep 19 2017 08:13:42 GMT+1000 (AEST)", date: "11:00 AM", 
distance: "1000", stamp: "0"}

I appologise for not posting earlier however, I felt it was irrelevant as no edits in any way have brought the path element into view.

Answer 1

@Gerado Furtado Thank you for your patience, you may have answered the question without realising it. The answer was to ensure the " scope.data[].time " attribute was parsed with " new Date(scope.data[].time) " and the solution has worked. Thank you again, Patrick.