在 d3.js 中合并数据答案

【问题标题】：Merging data in d3.js在 d3.js 中合并数据
【发布时间】：2012-05-15 01:53:44
【问题描述】：

我是 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，则更新它；否则将其附加到末尾”。

我可以用循环来做到这一点，但文档说应该用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] 中分别给出[null, HTMLDivElement, HTMLDivElement] 和"id1" 和"id2"。

知道下一步该怎么做吗？

【问题讨论】：

标签： javascript html d3.js

【解决方案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];})

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

【讨论】：

已经有一段时间了，您是否了解代码的作用还是仍然需要解释？
@arigold 是的，我愿意。但是，如果您可以使用更多信息编辑我的答案，我认为这对社区有好处。
我在想最清晰、最简洁的表达方式，没有比this更好的方法了。