合併d3.js中的數據

我是Pythonista，並試圖學習d3.js（微笑）。合併d3.js中的數據

我有一個套接字服務器。我的頁面訂閱了它。服務器將更新發送爲JSON '[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'。我寫了下面這個簡單的頁面：

<!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>

它工作正常！ WS接收數據。在div#messages它創建一個新的div。然後將來自msg的數據放入div#id*。因此，許多迭代後我有：

... 
<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> 
...

如何修改代碼，使之像這樣的工作：

有

... 
<div id='messages'> 
    <div id='id0'>0.25</div> 
    <div id='id1'>0.05</div> 
    <div id='id2'>0.25</div> 
</div> 
...

收到

'[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'

取得結果

... 
<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> 
...

我的意思是「如果#messages給出的ID，然後更新;否則追加到尾部」。

我可以循環做到這一點，但醫生說，它應enter()和exit()做..

看來，在這些條款（circle，join）是寫如何做到這一點。的問題是，我不都不懂在這些文章中的數據同步的想法。我希望代碼將幫助我理解這一點。

PS：我在Python中完成所有的邏輯，但是，我必須在頁面上顯示數據，並且重繪次數最少。而且大家都說d3 - 非常簡單方便。我閱讀了文檔，似乎d3是一個很好的框架，但我在基礎知識方面遇到了一些麻煩。

PPS：如果數據應在其他的傳輸方式 - 是沒有問題的。

UPDATE

隨着控制檯的幫助下，我發現，

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];}) 
    .enter()

給我陣列[null]

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];})

給我陣列[HTMLDivElement]與HTMLDivElement.__data__ == ["id0",0]

分別在 HTMLDivElement.__data__[0]

和

d3.select("#messages") 
    .select("div") 
    .selectAll("div") 
    .data([["id0",0]], function(d){return d[0];}) 
    .exit()

給出[null, HTMLDivElement, HTMLDivElement]與"id1"和"id2"。

任何想法下一步是什麼？

來源

2012-05-15 akaRem

我發現這似乎工作..但是它究竟是做什麼的？

var my_data = JSON.parse(message.data); 
var my_selection = d3.selectAll("#messages") 
    .selectAll("div") 
    .data(my_data, function(d){return d[0];}) 
my_selection 
    .enter() 
    .append("div") 
    .attr("id",function(d){return d[0];}) 
my_selection 
    .text(function(d){return d[1];})

如果沒人能回答，可能有人能解釋一下嗎？

來源

2012-05-15 05:16:55 akaRem

既然已經有一段時間了，您是否明白代碼的作用或者您是否仍然喜歡解釋？ –

@arigold是的，我喜歡。但如果你可以用更多的信息編輯我的答案，我認爲這對社區會有好處。 – akaRem

我正在考慮放置它的最清晰和最簡潔的方式，並且不能比[this]做得更好（http://bost.ocks.org/mike/join/）。 –

合併d3.js中的數據

回答

相關問題