使用 d3.js 在表格中显示关联数组的数据答案

【问题标题】：Display data of an associative array in a table with d3.js使用 d3.js 在表格中显示关联数组的数据
【发布时间】：2012-12-27 19:35:42
【问题描述】：

我正在尝试使用 d3.js 在表中显示关联数组的数据但我无法获得表中的各个值。

这是我的数组的一部分：

    var twitterDays = 
  [ 
    { 
      0: 
      {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0,
        10: 0,
        11: 0,
        12: 0,
        13: 0,
        14: 0,
        15: 0,
        16: 0,
        17: 0,
        18: 0,
        19: 0,
        20: 0,
        21: 0,
        22: 0,
        23: 0,
        "total": 0
      },
      "day": "monday"
    },
    { 
      1: 
      {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0,
        10: 0,
        11: 0,
        12: 0,
        13: 0,
        14: 0,
        15: 0,
        16: 0,
        17: 0,
        18: 0,
        19: 0,
        20: 0,
        21: 0,
        22: 0,
        23: 0,
        "total": 0
      },
      "day": "tueday"
    }, etc etc

使用 d3.js，我正在向不同的键添加值。

这就是我制作桌子的方式：

var table = d3.select("#datavis").append("table").attr("class", "twitterTable");
var tbody = table.append("tbody");


var rows = tbody.selectAll("tr")
      .data(twitterDays)
        .enter()
        .append("tr").attr("class", function(d) { return d["day"] });

var monday = tbody.select(".monday")
        .data(d3.values(twitterDays[0][0]))
          .enter()
          .append("td")
          .text(d3.values(twitterDays[0][0]));

这是我认为需要更改的部分：.text(d3.values(twitterDays[0][0]));

问题是我想要制作的“td”中的单个值（每个 1），但是我得到每个“td”中所有值的所有值..

这是我得到的：

<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td>
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td> 
<td>39,25,20,11,9,8,2,3,9,36,36,48,57,58,51,50,75,63,67,58,62,74,67,64,992</td>
etc etc

我想要这样：

<td>39</td>
<td>25</td>
<td>20</td>
<td>11</td>
<td>9</td>
<td>8</td>
<td>2</td>
etc etc

【问题讨论】：

听起来你想要嵌套选择。你看过bost.ocks.org/mike/nest吗？

标签： javascript arrays d3.js html-table associative-array

【解决方案1】：

问题确实出在.text(d3.values(twitterDays[0][0])); 上。它应该只是.text(String);，如下所示：http://jsfiddle.net/rKa2E/

注意：我在这里修正了一个小错字：var monday = tbody.select(".monday")，你的意思可能是var monday = rows.select(".monday")。

【讨论】：

【解决方案2】：

我认为.text(d3.values(twitterDays[0][0]));这行应该是：

.text(function(d){return d});

因为您已经拥有数据，所以您应该包含该数据，而不是再次包含整个向量。

【讨论】：