Question

I have an array with my column title and i want my first cell to have “A1” as title.
I tried like that :

var title=mtable.append("thead").append("tr");
title.append("td").text("A1");
title.selectAll("td")
        .data(lTitre)
        .enter().append("td")
        .text(function(d) { return d.key; });

My code doesn’t draw the first column title: 2007 (as show under). how can i solve this ?

<thead>
  <tr>
    <td>A1</td>
 !!!! <td>2007</td> !!!!! is missing here 
    <td>2008</td>
    <td>2009</td>
    <td>2010</td>
    <td>2011</td>
  </tr>
</thead>

Answer 1

With your current code, if you check the __data__ bound to <td>A1</td>, you’ll see it has __data__.key == 2007. This happens because whenever your selectAll() statement matches any elements in your current selection, the .data() function binds data to existing elements before it creates the entering selection. To fix this, simply use a selectAll() function that doesn’t match any existing elements:

var title = mtable.append("thead").append("tr");
title.append("td").text("A1");
title.selectAll(".new")
        .data(lTitre)
        .enter().append("td")
        .text(function(d) { return d.key; });