d3嵌套选择-表附加在d3.v2中有效，但在d3.v3中无效

Question

Problem

I am appending to an existing table dynamically following the example in the D3 API reference . The problem is, this code works when I include d3.v2.js, but doesn't work when I switch to d3.v3.js.

When using d3.v2, everything appends as I would expect it to. When using d3.v3, only the first object in sessions gets appended and the rest are nowhere to be found. I have created two fiddles showing the different behavior.

Fiddles

• JSFiddle: v2 behavior
• JSFiddle: v3 behavior

The code I am using to append the items in sessions to the table hurricanes is shown here:

Javascript

var sessions = [
    {name: 'Fred',     year: 2014},
    {name: 'Bill',     year: 1970},
    {name: 'Pookie',   year: 1892},
    {name: 'Hurry',    year: 1941},
    {name: 'Nick',     year: 1953}
];

d3.select('#hurricanes').select('tbody').selectAll('tr')
        .data(sessions, function(d) { return d; })
    .enter().append('tr')
        .selectAll('td')
        .data(function(d) { return d3.values(d); })
    .enter().append('td')
        .text(function(d) { return d; });

HTML

<table id='hurricanes'>
  <tbody>
    <tr>
      <td>Andrew</td>
      <td>1992</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>1991</td>
    </tr>
    <tr>
      <td>Irene</td>
      <td>2011</td>
    </tr>
    <tr>
      <td>Katrina</td>
      <td>2005</td>
    </tr>
    <tr>
      <td>Ivan</td>
      <td>2004</td>
    </tr>
  </tbody>
</table>

I have read the guidelines regarding switching from 2.0 to 3.0 but I haven't found anything of use.

Question

Why does using d3.v3.js change the way the table is being appended? And what can I do to fix it?

Thanks!

Answer 1

There are two problems that lead to the strange result you are getting.

The first issue is that you have existing elements on your page that have no data bound to them, so when you make your initial selection, you are selecting the 5 existing tr elements. This means that we should expect the .enter() selection to be empty, and no new elements will be created.

The second issue results from the first. Since there is no data bound to the existing elements, when your key function gets called, it checks for the values associated with the existing elements, and gets back undefined . It seems that d3.v2 and d3.v3 handle this error differently, but in both cases it is an error, and the .enter() selection ends up containing one extra element in the case of d3.v3, and 5 extra elements in the case of d3.v2.

You can see that this is happening by logging the value of d to the console in your key function:

d3.select('#hurricanes').select('tbody').selectAll('tr')
  .data(sessions, function(d) { 
     console.log(d);
     return d; 
  })

You will notice that the output is

undefined
undefined
undefined
undefined
undefined
Object {name: "Fred", year: 2014}
Object {name: "Bill", year: 1970}
Object {name: "Pookie", year: 1892}
Object {name: "Hurry", year: 1941}
Object {name: "Nick", year: 1953}

You say that it is working in d3.v2, but that is not the case. You are simply getting a different errant result. Since there are only 5 objects in your data array, you should expect to only have 5 tr elements in your output after the data is joined. In other words, there should be nothing in the .enter() selection, because there are already the same number of tr elements as there are datapoints in your dataset.

If you remove the key function, d3 will revert to binding the data by index, rather than by key. When you do this you will notice that you now get the expected result of 5 elements with both d3 versions:

d3.v2 JSFiddle

d3.v3 JSFiddle

Now the data is bound to the originally existing elements. But there's a problem now, because the bound data is not being reflected in the elements themselves. In other words, the row that says 'Andrew 1992' is bound to data {name: 'Fred' year: 2014} , and so on down the line. To update to the new values you would need to select the existing nodes and use the .text() function to update the elements with their newly bound data.

Leave that all aside though, because that's not what you're trying to accomplish anyways. You want to have 10 elements in your output, the original 5, and 5 newly created from the dataset. To do that you either need to:

---

(1) Add entries for 'Andrew', 'Bob', 'Irene', 'Katrina', and 'Ivan' to the sessions data, remove the existing html elements representing them, and then build a complete table from the data.

Method 1 JSFiddle

---

OR

---

(2) Create an empty selection within the tbody and append the new elements to that:

 d3.select('#hurricanes').select('tbody').selectAll('.new-entry') .data(sessions) .enter().append('tr') .attr('class', 'new-entry') .selectAll('td') .data(function(d) { return d3.values(d); }) .enter().append('td') .text(function(d) { return d; }); 

Method 2 JSFiddle

---

I hope that helps. If you want to read up on nested selections and key functions, here are a couple excellent posts from Mike Bostock himself:

Nested Selections

Object Constancy