CODEWITHSUNDEEP
javascriptd3.js
zeleniy
zeleniy

Reputation: 2272

d3.js. How to update nested nodes?

Here is a jsfiddle. I expect that after second step when i update table rows with new data set it will show 3 and 4. But it still show 1 and 2. Why? Why nested elements still keep old data set? How to fix it? How to update nested tags?

const data1 = [1, 2];

const table = d3.select('body')
  .append('table')
  .append('tbody');

table
  .selectAll('tr')
  .data(data1)
  .enter()
  .append('tr')
  .append('td')
  .text(function(d) {
    return d;
  });

const data2 = [3, 4];

table
  .selectAll('tr')
  .data(data2)
  .selectAll('td')
  .text(function(d) {
    return d;
  });

Upvotes: 0

Views: 320

Answers (1)

Mark
Mark

Reputation: 108567

To answer your comment question, this is a subselection select. From the docs:

Unlike selection.selectAll, selection.select does not affect grouping: it preserves the existing group structure and indexes, and propagates data (if any) to selected children. Grouping plays an important role in the data join. See Nested Selections and How Selections Work for more on this topic.

The important part here is propagates data to selected children.

Upvotes: 1

Related Questions