Javascript d3.js保存状态
我使用Javascript d3.js保存状态,javascript,jquery,save,d3.js,snapshot,Javascript,Jquery,Save,D3.js,Snapshot,我使用D3.js以交互和动态的方式可视化两个数据集。用户可以浏览所有图形,并通过组合加载其他数据和视图来检索数据上的各个视图。我希望用户能够通过mail、facebook等方式分享他们在数据中发现的宝藏。但在某种程度上,访问共享“快照”的新用户可以继续探索数据。所以我需要 保持我的动态网页的当前状态 能够快速加载和显示此状态 绑定用户快照时已绑定的所有事件 作为一个尽可能简单的例子(将会有各种各样的图和很多事件),想象一下有一个简单的d3线图和 graph.selectAll("path").o
D3.js
以交互和动态的方式可视化两个数据集。用户可以浏览所有图形,并通过组合加载其他数据和视图来检索数据上的各个视图。我希望用户能够通过mail
、facebook
等方式分享他们在数据中发现的宝藏。但在某种程度上,访问共享“快照”的新用户可以继续探索数据。所以我需要
graph.selectAll("path").on('mouseover', function(d){
$.get("ajaxFunction",{"d" : d} ,function(jsonData) {
//INIT NEW SVG
});
});
这个新的动态加载页面包含几个svg
s。但是,如果我只保存每个svg的形状和位置,就很难跟踪所有当前事件绑定。
如果我保存前用户所做的每一个操作,如何才能有效地重新加载快照?我能想象的最简单的事情是在所有节点上循环,将它们的身份和状态存储为哈希,然后使用ajax将此哈希作为json发送回服务器,并将哈希与作为url返回给用户的密钥一起放在数据库中。 访问url时,加载d3js对象并运行哈希设置,将每个节点的状态设置为原来的状态 获取节点的状态需要更多的d3js知识 您正在显示什么类型的数据?您也许应该能够向js添加事件寄存器,并记录所有执行的事件。通过事件调用者 例如,假设我有以下数据
{"Things":{
"Balls":{
"Footballs":"",
"Basketballs":""
},
"Persons":{
"Painter":{
"Pablo":"","Robert":""
},
"Programmers":{
"Robert":""}}}
您应该并且希望在鼠标单击时显示/隐藏此树的节点
你应该能做这样的事
var eventlog = [];
$(".nodes").onClick(function(this){
if (isClosed(this)){
function_to_open_node();
eventlog.append({"action" : "open", "id" : this.id})
}else{
function_to_close_node();
eventlog.append({"action" : "close", "id" : this.id})
}
})
[{"action" : "close", "id" : "id"},{"action" : "close", "id" : "someotherid"},{"action" : "close", "id" : "someid"}]
这样的话,你应该得到这样的结果
var eventlog = [];
$(".nodes").onClick(function(this){
if (isClosed(this)){
function_to_open_node();
eventlog.append({"action" : "open", "id" : this.id})
}else{
function_to_close_node();
eventlog.append({"action" : "close", "id" : this.id})
}
})
[{"action" : "close", "id" : "id"},{"action" : "close", "id" : "someotherid"},{"action" : "close", "id" : "someid"}]
这样你就有了一个可储存的状态!这是可以执行的。您实现过吗?如果是,怎么做?