Question

我使用D3.js以交互式和动态的方式可视化几个数据集。用户可以通过加载组合其他数据和视图来浏览所有图形并检索数据的各个视图。我希望用户能够通过mail，facebook等分享他们在数据中找到的宝藏。但在某种程度上，访问共享“快照”的新用户可以继续探索数据。所以我需要

保留动态网页的当前状态
能够加载并显示此状态 fast 。
绑定在用户快照

作为一个尽可能简单的示例（会有各种图形和大量事件），想象一下有一个简单的d3线图和

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

这个新动态加载的页面包含几个svg个。但是如果我只是保存每个svg的形状和位置，就很难跟踪所有当前的事件绑定。如果我保存前用户所做的每一个动作，我怎样才能有效地重新加载快照？

Answer 1

我能想到的最简单的事情是循环遍历存储其身份和状态的所有节点作为哈希然后使用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"}]

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

d3.js保存状态

1 个答案: