10

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

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

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

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

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

4

1 回答 1

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"}]

这样你就有了一个可存储的状态！可以执行的。

于 2012-08-30T15:11:35.753 回答