我是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]
。
你有什么想法接下来怎么做?