如何將Javascript動態數組傳遞給d3酒窩圖

Question

我正在嘗試使用在瀏覽器中運行的JavaScript來構建圖表。在使用dimple和d3在瀏覽器中構建圖表之前，該腳本從AWS DynamoDB中提取數據。我循環訪問數據庫掃描的結果並使用array.push（）將數據添加到數組中。結果是圖表軸被繪製，但根本沒有數據點或線條出現。

目標是繪製一個線圖/圖表，其中x軸爲clientTimeStamp，y軸爲airQ。

下面是javascript代碼，這是擺標籤內，我簡單的HTML頁面：

//Connect to Dynamo via Cognito Unauthenticated 
function getDynamoData() { 
    var db, tableName, creds; 
    var d3Data = []; 

    creds = new AWS.CognitoIdentityCredentials({ 
    IdentityPoolId: "eu-west-1:xxxxxx" //place cognito Unauthenticated ID pool here 
    }); 

    AWS.config = new AWS.Config({ 
    region:"eu-west-1", 
    credentials: creds 
    }); 

    db = new AWS.DynamoDB(); 
    tableName = "xxxxxxxx"; //insert your own table name here 

    db.scan(params = {TableName: tableName}, function(err, data) { 
    data = data.Items; 
    //Sort the data by timestamp 
    data.sort(function(a, b) { 
     return parseFloat(a.clientTimeStamp.N) - parseFloat(b.clientTimeStamp.N); 
    }); 

    data.forEach(function(item){ 
     d3Data.push({"timeStamp":item.clientTimeStamp.N, "airQ":item.airQ.N}); 
     console.log(item.airQ.N); 
     console.log(item.clientTimeStamp.N); 
     console.log(item.clientVer.S); 
    }) 
    }) 
    drawChart(d3Data, "clientTimeStamp", "airQ"); 
} 

// Draw the chart with dimple 
function drawChart(chartData, xLabel, yLabel) { 
    var svg = dimple.newSvg("#chartContainer", 800, 600); 
    var chart = new dimple.chart(svg, chartData); 
    chart.setBounds(60,30, 510, 305); 
    chart.addCategoryAxis("x", xLabel); 
    chart.addMeasureAxis("y", yLabel); 
    chart.addSeries(null, dimple.plot.line); 
    chart.draw(); 
} 

getDynamoData(); 

Answer 1

我已經找到了答案，以我自己的問題： 從本質上講，對drawChart函數的調用必須進行從db.scan函數中。我懷疑這是因爲'data'不是全局變量，因此它的作用域限於db.scan函數。之後，需要進行一些小的更改才能在x軸上顯示正確的日期。

更正代碼如下：

//Connect to Dynamo via Cognito Unauthenticated 
function getDynamoData() { 
    var db, tableName, creds, data; 
    var d3Data = []; 

    creds = new AWS.CognitoIdentityCredentials({ 
    IdentityPoolId: "xxxxxxxx" //Insert correct Cognito ID pool here 
    }); 

    AWS.config = new AWS.Config({ 
    region:"eu-west-1", 
    credentials: creds 
    }); 

    db = new AWS.DynamoDB(); 
    tableName = "xxxxxxxxx"; //Insert correct DynamoDB table name 

    db.scan(params = {TableName: tableName}, function(err, data) { 

    data = data.Items; 
    //Sort the data by timestamp 
    data.sort(function(a, b) { 
     return parseFloat(a.clientTimeStamp.N) - parseFloat(b.clientTimeStamp.N); 
    }); 

    data.forEach(function(item){ 
     var dateNum = Number(item.clientTimeStamp.N); 
     var myDate = new Date(dateNum); 
     var strDate = myDate.toISOString(); 
     console.log("strDate = " + strDate); 
     d3Data.push({"clientTimeStamp":strDate, "airQ":item.airQ.N}); 
    }) 
    drawChart(d3Data, "clientTimeStamp", "airQ"); 
    }) 
} 

// Draw the chart with dimple 
function drawChart(chartData, xLabel, yLabel) { 
    var iso = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ"); 
    var svg = dimple.newSvg("#chartContainer", 800, 600); 
    var chart = new dimple.chart(svg, chartData); 
    chart.setBounds(60,30, 510, 305); 
    var x = chart.addTimeAxis("x", xLabel,"%Y-%m-%dT%H:%M:%S.%LZ","%Y-%m-%d %H:%M:%S"); 
    x.timePeriod = d3.time.minutes; 
    x.timeInterval = 10; 
    chart.addMeasureAxis("y", yLabel); 
    chart.addSeries(null, dimple.plot.line); 
    chart.draw(); 
} 

getDynamoData();