gpt4 book ai didi

javascript - d3.js 保存状态

转载 作者:数据小太阳 更新时间:2023-10-29 03:57:27 25 4
gpt4 key购买 nike

我使用 D3.js 以交互式和动态的方式可视化几个数据集。用户可以通过加载组合附加数据和 View 来浏览所有图表并检索数据的各个 View 。我希望用户能够通过 mailfacebook 等方式分享他们在数据中发现的宝藏,但在某种程度上,新用户访问共享的“快照”可能会移动关于探索数据。所以我需要

  1. 保持动态网页的当前状态
  2. 能够快速加载和显示此状态。
  3. 绑定(bind)用户快照时刻已经绑定(bind)的所有事件

作为一个尽可能简单的例子(会有各种图表和很多事件),想象一下有一个简单的 d3 线图和

graph.selectAll("path").on('mouseover', function(d){
$.get("ajaxFunction",{"d" : d} ,function(jsonData) {
//INIT NEW SVG
});
});

这个新的动态加载页面包含几个 svg。但是如果我简单地保存每个 svg 的形状和位置,可能很难跟踪所有当前的事件绑定(bind)。如果我保存前用户执行的每个操作,我如何才能有效地重新加载快照?

最佳答案

我能想到的最简单的事情是遍历所有节点,将它们的身份和状态存储为散列,然后使用 ajax 将此散列作为 json 发送回服务器,并将散列连同 key 一起放入数据库中作为 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"}]

因此你有一个可存储的状态!可以执行。

关于javascript - d3.js 保存状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12089986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com