如何将Javascript动态数组传递给d3酒窝图答案

【问题标题】：How to pass Javascript dynamic array to d3 dimple chart如何将Javascript动态数组传递给d3酒窝图
【发布时间】：2015-10-18 09:10:09
【问题描述】：

我正在尝试使用在浏览器中运行的 javascript 构建图表。该脚本从 AWS DynamoDB 中提取数据，然后使用 dimple 和 d3 在浏览器中构建图表。我正在循环浏览数据库扫描的结果并使用 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();

【问题讨论】：

标签： javascript arrays d3.js charts amazon-dynamodb

【解决方案1】：

我找到了自己问题的答案：本质上，必须从 db.scan 函数中调用 drawChart 函数。我怀疑这是因为“数据”不是全局变量，因此它的范围仅限于 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();

【讨论】：