d3 chart + jQuery DataTables:无法读取嵌套数组

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了d3 chart + jQuery DataTables:无法读取嵌套数组相关的知识,希望对你有一定的参考价值。

我正在努力使this jQuery DataTables example适应我一直在开发的d3图表。

这是一个半工作的Plunker链接:http://plnkr.co/edit/kXvBjNsCbblC3ykkuPsL?p=preview

问题是某些值显示在表中,而其他值则不显示(特别是来自数组中数组的值)。奇怪的是,我得到的错误消息Cannot read property '0' of undefined指的是第1074行,其中定义了recordCol。这很奇怪,因为recordColstateName的值在DataTable中都显示得很好。同样奇怪的是,即使对于嵌套数组(尽管不是它们的值),所有列标题都会出现。

这是有问题的代码:

function tables(dataset) {

    var recordCol = Object.keys(dataset[0])[0];
    var stateName = Object.keys(dataset[0])[3];
    var dateCol = Object.keys(dataset[0].values[0])[0];
    var valCol = Object.keys(dataset[0].values[0])[1];

    var monthDateFormat = d3.time.format("%B");
    var yearDateFormat = d3.time.format("%Y");
    var properDateFormat = d3.time.format("%B %Y");

      var tableData = dataset.map(function(d) {
        d[recordCol] = d[recordCol].toString().slice(0, 15);
        d[stateName] = d[stateName].toString().slice(0, 20);
        d[dateCol] = d[dateCol];//.toString().slice(0, 20);   
        d[valCol] = d[valCol];///.toString().slice(0, 20);        

        return d;
      })

    $(".data-table").empty();

    if (dataTable) {
    dataTable.destroy();
    }

    dataTable = $(".data-table").DataTable({
      data: tableData,
      columns: [{
        "data": recordCol
      }, {
        "data": stateName
      }, {
        "data": dateCol
      }, {            
        "data": valCol        
      }]
    });

      d3.selectAll("thead th").each(function(d, i) {
        if (i === 0) {
          this.textContent = recordCol;
        } else if (i === 1) {
          this.textContent = stateName;
        } else if (i === 2) {
          this.textContent = dateCol; 
        } else if (i === 3) {
          this.textContent = valCol;          
        }
      });      
}

正如你在my semi-working Plunker中看到的那样,我一直在console.log中击败一匹死马,试图解决我收到的错误信息,另一个是this

总而言之,我要做的是将xy的所有值与staterecord一起出现在DataTable中 - 以及重新标记当前读取xy的列标题,分别为datevalue

提前,非常感谢您提供的任何帮助。

更新:

我发现,以下更改使得包含所有xy值的完整子数组出现在DataTable的每一行中:

  dataTable = $(".data-table").DataTable({
    data: tableData,
    columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
      "data": "values[, ].x" 
    }, {            
      "data": "values[, ].y"  
    }]
  });

这是一个updated Plunker。寻求解决方案仍在继续。

更新2:以下更改使xy值显示为Sun May 01 2011 00:00:00 GMT-0400 (Eastern Daylight Time)2761,但每行中相同:

  var tableData = dataset.map(function(d) {
    d[recordCol] = d[recordCol].toString().slice(0, 15);
    d[stateName] = d[stateName].toString().slice(0, 20);
  for (var i = 0; i < dataset.length; i++) {  
    d[dateCol] = dataset[0].values[i].x;
    d[valCol] = dataset[0].values[i].y;       
  } 

  dataTable = $(".data-table").DataTable({
    data: tableData,
    columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
      "data": dateCol 
    }, {            
      "data": valCol  
    }]
  });

另一个updated Plunker。显然,这是错误的;仍在寻找解决方案。

更新3:

仍然在寻找解决方案,但在这个third updated Plunker中,我发现了如何获取父数组第一行子数组中包含的所有值,并(错误地)将它们映射到父数组的所有行。这是一个出错的例子:enter image description here

有人能够展示解决方案吗?

答案

您需要更改表格地图。试试吧:

var table_map = [];

  for (var i = 0; i < dataset.length; i++) {  
    for (var j = 0; j < dataset[i].values.length; j++) {  

      var table_row = {};
      table_row[recordCol] = dataset[i][recordCol];
      table_row[stateName] = dataset[i][stateName];

      table_row[dateCol] = dataset[i].values[j][dateCol];
      table_row[valCol] = dataset[i].values[j][valCol];

      table_map.push(table_row);
    }
  }

Plunker Test

以上是关于d3 chart + jQuery DataTables:无法读取嵌套数组的主要内容,如果未能解决你的问题,请参考以下文章

[D3] Create Chart Axes with D3 v4

[D3] Build a Line Chart with D3 v4

DataTable +chart控件

D3 Chart SVG响应条和轴

Charts in Ionic

使用 d3.js/chart.js/highcharts 在实际和预测散点图中的 R 平方最佳拟合线