0

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
4

2 に答える 2

2

問題は確かにです.text(d3.values(twitterDays[0][0]));。代わりに.text(String);、次のようになります：http: //jsfiddle.net/rKa2E/

注：ここで小さなタイプミスを修正しました：var monday = tbody.select(".monday")、おそらくvar monday = rows.select(".monday")。

于 2013-01-13T21:47:08.277 に答える
1

私はその線が次の.text(d3.values(twitterDays[0][0]));ようになるべきだと思います：

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

すでにデータがあるので、ベクトル全体ではなく、そのデータを含める必要があります。

于 2013-01-13T21:39:32.173 に答える