合并d3.js中的数据 [英] Merging data in d3.js

查看：200
本文介绍了合并d3.js中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是Pythonista，试图学习d3.js（微笑）。



我有一个带socket的服务器。我的页面订阅。
服务器以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 ）{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> 
 ...

收到
$ b 

 '[[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> 
 ... 
  
 我的意思是如果给定id在#messages然后更新
 
 
 
我可以使用循环，但doc表示它将使用 enter（）和 exit（） .. 
 
 
 
文章（圈子， join ）是怎么写的。 
问题是，我不明白这些文章中的数据同步的想法。 
我希望代码帮助我理解这一点。
 
 
 
 
 
 
  PS：我在Python中做所有的逻辑，但是，我必须显示数据在页面上最小的重画。而且每个人都说d3  - 很容易和方便。我读了文档，似乎d3是好的框架，但我有一些麻烦与基本面。
 
 
 
 
 
 
  PPS：如果数据应以其他方式传输 - 没有问题。
 
 
 
 
 
 
 
 
 
  UPDATE  
 
 
 
在控制台的帮助下，我发现
  d3.select（＃messages）
 .select（div）
 .selectAll（div）
。 data（[[id0，0]]，function（d）{return d [0];}）
 .enter（）
  
给我数组 [null]  
 code> d3.select（＃messages）
 .select（div）
 .selectAll（div）
 .data（[[id0，0 ]]，函数（d）{return d [0];}）
  
 c $ c> [HTMLDivElement] 与 HTMLDivElement .__ data__ == [id0，0]  
 
 
 
和
  d3.select（＃messages）
 .select 
 .selectAll（div）
 .data（[[id0，0]]，function（d）{return d [0];}）
 .exit b $ b  
赋予 [null，HTMLDivElement，HTMLDivElement]  HTMLDivElement .__ data __ [0] 中的id1和id2 $ c>。
解决方案
我发现这似乎工作.. 
但它真的做什么？
  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];}）
  
如果没有人能回答，可能有人可以解释一下？
 
I'm Pythonista and trying to learn d3.js (smile).



I have a server with a socket. My page subscribes to it.
Server sends updates as JSON '[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'.
I wrote the following simple page:
<!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>

It works fine! WS receives the data. In the div#messages it creates a new div. And then places data from msg into the div#id*. So, after many iteration I have:
...
<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>
...







How to modify the code to make it work like this:



Having
...
<div id='messages'>
  <div id='id0'>0.25</div>
  <div id='id1'>0.05</div>
  <div id='id2'>0.25</div>
</div>
...

Recieve
'[["id0", 0.38], ["id1", 0.70], ["id8", 0.71]]'

Get in result
...
<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>
...

I mean "if given id in #messages then update it; else append it to the end".



I could do this with loops, but doc says that it shall be done with enter() and exit()..



It seems that in these articles (circle, join) is written how to do that.
The problem is that I do not understand ideas  of data synchronization in these articles at all.
I hope that the code will help me understand this.






PS: I do all the logic in Python, however, I must show data on the page with minimal redrawing. And everyone says that d3 - is very easy and convenient. I read the docs and it seems that d3 is good framework, but I have some troubles with fundamentals.






PPS: If data should be transmitted in other way - there is no problem.









UPDATE



With the help of console, I found, that
d3.select("#messages")
  .select("div")
  .selectAll("div")
  .data([["id0",0]], function(d){return d[0];})
  .enter()

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

gives me array [HTMLDivElement] with HTMLDivElement.__data__ == ["id0",0] 



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

gives  [null, HTMLDivElement, HTMLDivElement] with "id1" and "id2" in HTMLDivElement.__data__[0] respectively.



Any idea What next?
 解决方案 
I found that this seems to work..
but what does it really do?
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];})

If nobody can answer, may be somebody can explain?


                        
这篇关于合并d3.js中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆