CODEWITHSUNDEEP
d3.js
Ehsan Arian
Ehsan Arian

Reputation: 131

how to update data in D3 version 4?

I have the following sample data.

var d1 = [11,18,20];
var d2 = [11,11,20];

I tried with methods enter() and exit() but update does not work? please help me.

var svg = d3.select("body")
        .append("svg")
        .attr("height","100%")
        .attr("width","100%");

var rect = svg.selectAll("rect");

      rect
      .data(d1)
      .enter().append("rect")
                .attr("height",function(d,i){ return d*15; })
                .attr("width","50")
                .attr("fill","pink")
                .attr("x",function(d,i){ return 100*i; })
                .attr("y",function(d,i){ return 300-(d*15); });

Upvotes: 1

Views: 746

Answers (1)

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

Update pattern was changed in d3v4. From changelog:

In addition, selection.append no longer merges entering nodes into the update selection; use selection.merge to combine enter and update after a data join.

You have to rewrite your code:

var rect = rect.selectAll("rect")
  .data(d1)

rect
  .enter().append("rect")
  .merge(rect) // <== !!! doing merge here
  .attr("height",function(d,i){ return d*15; })
  .attr("width","50")
  .attr("fill","pink")
  .attr("x",function(d,i){ return 100*i; })
  .attr("y",function(d,i){ return 300-(d*15); });

Upvotes: 1

Related Questions