title: How to force recalculation of element attributes when data changes in d3.js?
body: <p>I am trying to work out how D3.js works, but I am having trouble understanding some (probably) basic principles... I would appreciate some help.</p>
  
  <p>From what I understand, this snippet creates the <code>rect</code> SVG elements and sets their attributes:</p>
  
  <pre><code>var nodes = d3.selectAll('circle.node')
      .data(mydata)
    .enter()
      .append('rect').class('attr', 'node');
  
  // now set some attributes on these SVG elements:
  nodes.attr('...', function(d) {
      return '...'; 
  });
  </code></pre>
  
  <p>When data changes later, my guess would be that I only need to do this:</p>
  
  <pre><code>d3.selectAll('circle.node')
      .data(mydata) // doesn't work as I would expect
  </code></pre>
  
  <p>However, the snippet above doesn't work as I would expect it to. If I want the attributes to change, I still need to call <code>attr()</code> on the selection, even though the attribute was specified as a function of the data and should be able to re-calculate itself. Even worse, I need to specify the identical anonymous function if I want to force this recalculation.</p>
  
  <p>Why is that? Is there a <code>.updateMyAttributesFromData()</code> function that I have somehow missed? Something like this:</p>
  
  <pre><code>d3.selectAll('circle.node')
      .data(mydata)
      .updateMyAttributesFromData(); // not a real function
  </code></pre>
  
  <p>Am I missing something?</p>
  
  <p>-</p>
  
  <p>By the way, so as to avoid "duplicate question" marks: question <a href="https://stackoverflow.com/questions/12992351/how-to-update-elements-when-the-underlying-data-changes-with-d3js">How to update elements when the underlying data changes with d3js</a> has a promising title, however the content is unfortunately completely different. :)</p>