title: Merging data in d3.js
body: <p>I'm Pythonista and trying to learn d3.js (smile).</p>
  
  <p>I have a server with a socket. My page subscribes to it.
  Server sends updates as JSON <code>'[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'</code>.
  I wrote the following simple page:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;WebSockets&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="http://d3js.org/d3.v2.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var ws = new WebSocket("ws://localhost:9999/updates");
        ws.onmessage = function(message)
        {
          var my_data = JSON.parse(message.data);
          var dd = d3.selectAll("#messages")
            .append("div")
            .selectAll("div")
            .data(my_data)
            .enter()
            .append("div")
            .attr("id",function(d){return d[0];})
            .text(function(d){return d[1];})
        }
      &lt;/script&gt;
      &lt;div id='messages'&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works fine! WS receives the data. In the <code>div#messages</code> it creates a new <code>div</code>. And then places data from msg into the <code>div#id*</code>. So, after many iteration I have:</p>
  
  <pre><code>...
  &lt;div id="messages"&gt;
    &lt;div&gt;
      &lt;div id="id0"&gt;0.83&lt;/div&gt;
      &lt;div id="id1"&gt;0.06&lt;/div&gt;
      &lt;div id="id2"&gt;0.33&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt; 
      ... 
    &lt;/div&gt;
    &lt;div&gt; 
      ... 
    &lt;/div&gt;
    ...
  &lt;/div&gt;
  ...
  </code></pre>
  
  <hr>
  
  <p>How to modify the code to make it work like this:</p>
  
  <p><strong>Having</strong></p>
  
  <pre><code>...
  &lt;div id='messages'&gt;
    &lt;div id='id0'&gt;0.25&lt;/div&gt;
    &lt;div id='id1'&gt;0.05&lt;/div&gt;
    &lt;div id='id2'&gt;0.25&lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p><strong>Recieve</strong></p>
  
  <pre><code>'[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'
  </code></pre>
  
  <p><strong>Get in result</strong></p>
  
  <pre><code>...
  &lt;div id='messages'&gt;
    &lt;div id='id0'&gt;0.38&lt;/div&gt;
    &lt;div id='id1'&gt;0.70&lt;/div&gt;
    &lt;div id='id2'&gt;0.25&lt;/div&gt;
    &lt;div id='id8'&gt;0.71&lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p><strong>I mean "if given id in #messages then update it; else append it to the end"</strong>.</p>
  
  <p>I could do this with loops, but doc says that it shall be done with <code>enter()</code> and <code>exit()</code>..</p>
  
  <p>It seems that in these articles (<a href="http://mbostock.github.com/d3/tutorial/circle.html" rel="nofollow">circle</a>, <a href="http://bost.ocks.org/mike/join/" rel="nofollow">join</a>) is written how to do that.
  The problem is that I do not understand ideas  of data synchronization in these articles at all.
  I hope that the code will help me understand this.</p>
  
  <hr>
  
  <p><strong>PS:</strong> I do all the logic in Python, however, I must show data on the page with minimal redrawing. And everyone says that d3 - is very easy and convenient. I read the docs and it seems that d3 is good framework, but I have some troubles with fundamentals.</p>
  
  <hr>
  
  <p><strong>PPS:</strong> If data should be transmitted in other way - there is no problem.</p>
  
  <hr>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>With the help of console, I found, that</p>
  
  <pre><code>d3.select("#messages")
    .select("div")
    .selectAll("div")
    .data([["id0",0]], function(d){return d[0];})
    .enter()
  </code></pre>
  
  <p>gives me array <code>[null]</code></p>
  
  <pre><code>d3.select("#messages")
    .select("div")
    .selectAll("div")
    .data([["id0",0]], function(d){return d[0];})
  </code></pre>
  
  <p>gives me array <code>[HTMLDivElement]</code> with <code>HTMLDivElement.__data__ == ["id0",0]</code> </p>
  
  <p>and</p>
  
  <pre><code>d3.select("#messages")
    .select("div")
    .selectAll("div")
    .data([["id0",0]], function(d){return d[0];})
    .exit()
  </code></pre>
  
  <p>gives  <code>[null, HTMLDivElement, HTMLDivElement]</code> with <code>"id1"</code> and <code>"id2"</code> in <code>HTMLDivElement.__data__[0]</code> respectively.</p>
  
  <p><strong>Any idea What next?</strong></p>