title: updating d3 data to the child nodes
body: <p>I am creating a d3 barchart. I have an array of json values</p>
  
  <pre><code>      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)
  </code></pre>
  
  <p>After some time i get a new list of values so i update the array and pass it.</p>
  
  <pre><code>             this.svg.selectAll("g")
                      .data(data)
                      .attr('asd',function(d){
                        console.log("My Data",d);
                        return 1;
                      });
  </code></pre>
  
  <p>Here in my console log i am getting data perfectly fine but when i try to access from the rectangles</p>
  
  <pre><code>   bars.selectAll('rect')
              .transition()
                .attr('fill',this.color)
                .attr('width',function(d){
                    console.log(d.value);
                    return widthScale(d.value)
                  })
                .duration(1000)
  </code></pre>
  
  <p>I am getting old values. What am I doing wrong?</p>