d3.js Time Scale-Diagramm, Array Objektwerte das Diagramm-Rendering ist nicht während statische Werte das Diagramm perfekt

Question

dynamisch Erstellen eines Array mit N Objekte aus einer JSON-Datei

var taskArray = []; 


d3.json("input.json", function(error, json) { 
     if (error) 
      return console.warn(error); 

     for (var i = 0; i < json.length; i++) { 

       //console.log(json[i][0]); 
       var tasks = []; 
       var version = json[i][1]; 
       var phase = json[i][2]; 
       var part = version + "(" + phase + ")"; 
       var name = json[i][0]; 


       taskArray[i]={ 
        "task" : part, 
        "type" : name, 
        "startTime" : json[i][3], 
        "endTime" : json[i][4] 
       }; 

//  console.log(taskArray); 
     } 

     }); 

JSON-Datei-Format übertragen:

[["abc", "abc_15.0.1", "Intital_phase", "Di Jul 26 21:00:00 2016", "Do Jul 28 09:00:00 2016"]]

Wenn ich das Array gebe Werte Statisch funktioniert es:

var taskArray = [ 

{ 
    task: "abc_15.0.1 (Intital_phase) ", 
    type: "abc", 
    startTime: "Mon Aug 01 06:00:00 2016", //year/month/day 
    endTime: "Mon Aug 01 14:00:00 2016", 
}, 
]; 

var dateFormat = d3.time.format("%a %b %e %H:%M:%S %Y"); 

var timeScale = d3.time.scale() 
     .domain([d3.min(taskArray, function(d) {return dateFormat.parse(d.startTime);}), 
       d3.max(taskArray, function(d) {return dateFormat.parse(d.endTime);})]) 
     .range([0,w]); 

Ist das Array-Objekt nicht korrekt? oder die Art, wie ich auf die Objektwerte zugreife, ist falsch, ich kann sie nicht finden.

Answer 1

Der D3-Datumsparser gibt eine Zeichenfolge zurück, während Sie tatsächliche Date-Objekte übergeben möchten. Betrachten Sie das:

var timeScale = d3.time.scale() 
     .domain([d3.min(taskArray, function(d) {return new Date(d.startTime);}), 
       d3.max(taskArray, function(d) {return new Date(d.endTime);})]) 
     .range([0,w]); 

EDIT: den Grund gefunden!

Sie füllen Ihre taskArray innerhalb d3.json() und versuchen, es danach zu verwenden. Dies ist nicht möglich, da d3.json()asynchron ist. Es kehrt sofort zurück und erledigt seine Arbeit im Hintergrund. Das heißt, Sie müssen d3.json() einen zweiten Parameter übergeben: eine Callback-Funktion. Diese Funktion wird aufgerufen, wenn die angeforderte JSON-Datei geladen wurde. Lange Rede, kurzer Sinn: Verschieben Sie den gesamten Code, der auf den Daten beruht, in eine Funktion, die Sie als Callback übergeben.

Answer 2

Ich denke, einige Kommas müssen entfernt werden. Sie benötigen nicht die eine nach dem endTime Attribut, und die unmittelbar vor dem Schließen ].