d3将单元格添加到现有表格中

时间:2013-05-02 16:11:41

标签: html d3.js append html-table

我在解决这个问题时遇到了一些问题。我有一个现有的HTML表,并希望使用d3将一些数据附加到表中。

这是HTML表格:

<table>
     <thead>
     <tr id="table_header">
       <th>Header 1</th>
       <th>Header 2</th>
       <th>Header 3</th>
       <th>Header 4</th>
       <th>Header 5</th>
       <th>Header 6</th>
     </tr>  
     </thead>
     <tbody id="data_table">
     </tbody>
  </table>

现在我只想添加一些额外的标题,所以我使用d3

<script>
    d3.json("data.php", function(monthly_growth) {

    d3.select("#table_header").selectAll("th").data(monthly_growth).enter().append("th").text(function(d) {return d.MONTH;});

    });
</script>

我希望在没有实际数据的情况下,这并不难理解。基本上我的数据集具有未来几年每个月的值。我想在数据集中为每个月创建一个新标头。目前我的代码是将标题附加到我的原始表中,但它缺少数据集的前6个月。我怀疑我的d3代码开始在第一个Header附加数据,这显然不是我想要的。

我也试过给我的第6个标题添加一个ID并附加到那个但是它的效果并不好。它似乎在它下面开始了一排新的标题。此外,我觉得这不是正确的做法。

1 个答案:

答案 0 :(得分:0)

通过创建一个新类来实现这一点,以便d3添加新类型而不是“思考”我想选择已经存在的类。:

<script>
    d3.json("data.php", function(monthly_growth) {

    d3.select("#table_header").selectAll("th.month").data(monthly_growth).enter().append("th").attr('class', 'month').text(function(d) {return d.MONTH;});

    });
</script>