updating d3 data to the child nodes

Question

I am creating a d3 barchart. I have an array of json values

      bars = this.svg.selectAll("g")
                    .data(data)
                    .enter()
                      .append('g')
                      .attr('transform',function(d, i) {
                        return "translate(0," + i * 30 + ")";
                        });

          bars.append('rect')
            .attr('height',20)
            .attr('fill',this.color)
            .attr('width',0)
            .attr("x",100)
            .transition()
              .attr('width',function(d){
                console.log('rect',d);
                return widthScale(d.value)
                })
              .duration(1000)

After some time i get a new list of values so i update the array and pass it.

             this.svg.selectAll("g")
                    .data(data)
                    .attr('asd',function(d){
                      console.log("My Data",d);
                      return 1;
                    });

Here in my console log i am getting data perfectly fine but when i try to access from the rectangles

   bars.selectAll('rect')
            .transition()
              .attr('fill',this.color)
              .attr('width',function(d){
                  console.log(d.value);
                  return widthScale(d.value)
                })
              .duration(1000)

I am getting old values. What am I doing wrong?

Answer 1

You're binding the data to the g elements and selecting the rect elements afterwards. If you want to propagate the data, use .select("rect") :

this.svg.selectAll("g").data(data).select("rect")