Question

我是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()和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]中为"id1"和"id2"提供HTMLDivElement.__data__[0]。

任何想法下一步是什么？

Answer 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];})

如果没有人能回答，可能有人可以解释一下吗？

合并d3.js中的数据

1 个答案: