d3js折線圖未顯示

Question

我正在創建折線圖，但遇到了一個小問題。 我正在使用d3js V4，具體代碼如下：

$(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;

范圍是具有多個組件的對象（this）。

具體而言，折線圖的線不可見，而側面和底部比例尺則可見。 此外，在檢查時，路徑元素具有一些關聯的數據，如果僅能看到它，就可以開始調試。

任何信息，將不勝感激

編輯：scope.data對象包含具有時間，日期，距離和標記字段的對象數組。 圖形“ d”屬性顯示的X范圍是-25000-> 25000，Y值為155。我應該看到一條從左側到右側的水平線，但這沒有發生。 另外，我認為時間解析是主要的罪魁禍首。 時間值已被臨時修改為等於UTC日期時間字符串。

編輯：時間是類似UTC的日期時間字符串：2017年9月19日星期二09:33:42 GMT + 1000（AEST）行相差+-10分鍾

我當前正在使用以下代碼：var parseTime = d3.timeParse（d3.timeFormat.utc）;

來自瀏覽器解析的json的完整數組

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

我對不提早發布表示歉意，但是我覺得這是無關緊要的，因為沒有任何修改使path元素出現在視圖中。

Answer 1

@Gerado Furtado感謝您的耐心等待，您可能沒有意識到就回答了這個問題。 答案是確保將“ scope.data[].time ”屬性與“ new Date(scope.data[].time) ”一起解析，並且該解決方案有效。 再次謝謝你，帕特里克。