Deleting element with D3 fails

Question

Deleting dom with D3 fails Hello everyone. I try to use D3 to manipulate doms, which are defined in html ahead of time. Content in html:


 James
 Kate

D3 code:

var div = d3.select('div')
var pp = div.selectAll('p.child');
var ppUpdate = pp.data(dataset, d =>d.id);
var ppexit = ppUpdate.exit();
ppexit.remove();

I use the following data for testing: var data1 = [{ id: 1, name: 'James' }, { id: 4, name: 'Jordan' }];

Error when running to "pp.data"：

I modified the relevant code to:

var ppUpdate = pp.data(dataset, d => {
   if(d){
     return d.id
   }
 });

There will be no errors. But "ppUpdate.exit();" doesn't return the record I want to delete, instead it returns both records in the html. Further tracing the code execution process, in the "bindKey" function in d3.js, the correct "keyValue" cannot be obtained.

Please, how can I complete my function? thanks.

user_5768908 · Answer

The first argument in selection.data(), that you named d, is the datum of the element. The important information is that the key function is evaluated on the elements and on the data; however, the elements initially have no data bound to them, so the datum is null.

What you want is to get the element's id first:

var ppUpdate = pp.data(dataset, (d, i, n) => d ? d.id : n[i].id);

Notice that because you had an arrow function in your question I cannot use this, so I'm using n[i] to get the element.

Here is the working snippet:

var dataset = [{
  id: 1,
  name: 'James'
}, {
  id: 4,
  name: 'Jordan'
}];
var div = d3.select('div')
var pp = div.selectAll('p.child');
var ppUpdate = pp.data(dataset, (d, i, n) => d ? d.id : n[i].id);
var ppexit = ppUpdate.exit();
ppexit.remove();



  James
  Kate

Deleting element with D3 fails

1 Answers