3

我是 Pythonista，正在尝试学习 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 然后更新它；否则将它附加到末尾”。

我可以用循环来做到这一点，但 doc 说应该用enter()and exit()..

似乎在这些文章（circle，join）中写了如何做到这一点。问题是我完全不理解这些文章中关于数据同步的思想。我希望代码能帮助我理解这一点。

PS：我在 Python 中完成所有逻辑，但是，我必须在页面上显示数据，并且重绘最少。每个人都说 d3 - 非常简单方便。我阅读了文档，似乎 d3 是一个很好的框架，但我在基础方面遇到了一些麻烦。

PPS：如果数据应该以其他方式传输 - 没有问题。

更新

在控制台的帮助下，我发现

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]

和

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

分别给出 [null, HTMLDivElement, HTMLDivElement]with"id1"和"id2"in HTMLDivElement.__data__[0]。

知道下一步怎么办？

4

1 回答 1

1

我发现这似乎可行..但它到底有什么作用？

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-15T05:16:55.077 回答