在d3.js中合并数据

Question

在d3.js中合并数据

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>

它正常工作！Web Service（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：如果需要以其他方式传输数据，也没有问题。

更新

通过控制台的帮助，我发现

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()

在 HTMLDivElement.__data__[0] 中，"id1" 和 "id2" 分别给出了 [null, HTMLDivElement, HTMLDivElement]。

你有什么想法接下来怎么做？

- akaRem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- akaRem · Accepted Answer

我发现这似乎起作用了... 但它真正做了什么？

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

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