title: Why does my Data selector have a side effect?
body: <p>I'm building a small visualization using D3 and need to bind several different things to the same data element. I had a point where the only way I seemed to be able to get this to work however was by carrying out multiple calls to <code>Data()</code> which I felt was probably inefficient. </p>
  
  <p>As an example here's my join code:</p>
  
  <pre><code>// Sort out the data joins
  var joinedGroups = segments.selectAll(".menu").data(pie(data));
  var joinedSegments = segments.selectAll(".menu-segment").data(pie(data));
  var joinedIcons = segments.selectAll("circle").data(pie(data));
  </code></pre>
  
  <p>Here's an image to help illustrate what I was building:</p>
  
  <p><img src="https://i.stack.imgur.com/2D1HN.png" alt="enter image description here"></p>
  
  <p>In my DOM you can see how these relate:</p>
  
  <ul>
  <li>joinedGroups = <code>&lt;g&gt;</code></li>
  <li>joinedSegments = <code>&lt;path&gt;</code></li>
  <li>joinedIcons = <code>&lt;circle&gt;</code></li>
  </ul>
  
  <p>Here is an output from the DOM to illustrate:</p>
  
  <pre><code>&lt;g class="menu"&gt;
         &lt;path class="menu-segment" d="" style="fill: rgb(255, 0, 0);"&gt;&lt;/path&gt;
         &lt;circle r="5" cx="29.999999999999996" cy="-51.96152422706632"&gt;&lt;/circle&gt;  
  &lt;/g&gt;
  </code></pre>
  
  <p>I was then using the <code>joinedGroups</code> to add new <code>&lt;g&gt;</code>, <code>&lt;path&gt;</code> and <code>&lt;circle&gt;</code> elements. At that point I switched to using <code>joinedSegments</code> to update my pie segments. This is the bit that I felt was wrong:</p>
  
  <pre><code>// Update existing segments and icons
  joinedSegments.attr("d", arc);
  joinedIcons.attr("cx", function(d) { return calcMidPoint(d).x; })
             .attr("cy", function(d) { return calcMidPoint(d).y; });
  </code></pre>
  
  <p>After thinking about this I concluded that I should be able to now take my <code>joinedGroups</code> and select all the <code>.menu-segment</code> instances, to get my all that <code>&lt;path&gt;</code> elements instead.</p>
  
  <pre><code>joinedGroups.selectAll(".menu-segment").attr("d", arc);
  </code></pre>
  
  <p>At this point I thought I cracked it, I was no longer using <code>joinedSegments</code> so I took out the <code>Data()</code> call at the top, and then it stopped working correctly, missing out a segment that should be there. So I'm left a little confused about the side-effects of calling <code>Data()</code> - can anyone explain what's going on? </p>
  
  <p>You can see an example <a href="http://jsfiddle.net/IPWright83/s51mt3tv/" rel="nofollow noreferrer">JSFiddle</a> here - commenting out lines <strong>#123 &amp; #124</strong> illustrate the side-effect of calling <code>Data()</code> that I'm referring too, as the yellow segment will disappear.</p>