StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMerging data in d3.js
text
Body
copied!<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><!doctype html> <html> <head> <title>WebSockets</title> </head> <body> <script src="http://d3js.org/d3.v2.js"></script> <script> 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];}) } </script> <div id='messages'></div> </body> </html> </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>... <div id="messages"> <div> <div id="id0">0.83</div> <div id="id1">0.06</div> <div id="id2">0.33</div> </div> <div> ... </div> <div> ... </div> ... </div> ... </code></pre> <hr> <p>How to modify the code to make it work like this:</p> <p><strong>Having</strong></p> <pre><code>... <div id='messages'> <div id='id0'>0.25</div> <div id='id1'>0.05</div> <div id='id2'>0.25</div> </div> ... </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>... <div id='messages'> <div id='id0'>0.38</div> <div id='id1'>0.70</div> <div id='id2'>0.25</div> <div id='id8'>0.71</div> </div> ... </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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload