合并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中的数据

回答

相关问题