更新可视化背后的数据 [英] Update data behind the visualization

问题描述

我有一个树布局。如此JSBin
http://jsbin.com/AbOmAZE/11/

在与节点相关联的文本上的点击事件，我想要更新可视化背后的数据（我需要更新树背后的数据布局，因为它用作接口）。我已经实现了重绘和点击事件，但是我不知道如何更新数据，只是从知道点击函数返回的当前选择。

  node.append（text）
 .text（function（d）{return d.name;}）
 .on 
 var result = prompt（'更改节点的名称，d.name）
 if（！result）{
 d.name = result; // !!!这是问题是
} 
 console.log（d）
 draw（）; //重绘图
}）
  

请参考上面的JSBin。

解决方案

在玩了D3 2个月后，我终于明白了我感到困惑的是什么：

相当简单，涉及两个主要步骤：

1. 获取数据数组
   $ b

   对于这一步，你只需要选择你最初绑定数据的元素使用.data（） - 在这种情况下它是.nodes元素

   
   
   

   var node = d3.select（'svg'）。select（'。nodes'）

   
   
   

   然后你需要使用.data（）函数获取数据。这为每个可用的节点返回一个数组。由于您需要整个树的数据，通过获取数组中第一个项目的数据[0]

   选择节点根。
   
   

   var data = node.data（）[0]




2. 过滤数据
   
   

   现在我们有数据，但是运行d3.tree（data）添加了几个属性，如'x'和'y'值。要获取类似于您最初放入的数组的数组，需要一个递归过滤函数：

    函数过滤器b $ b for（var i in data）{
    if（[depth，x，x0，y，y0，parent，size]。indexOf ）！= -1）{
    delete data [i]; 
   } else if（i ===children）{
    for（varj in data.children）{
    data.children [j] = filter（data.children [j] ）
   } 
   } 
   } 
   返回数据; 
   } 
     

你有一个数组，更新的信息由d3修改，没有任何额外的属性d3在过程中添加。此数组现在可以保存回数据库。

看到一个完全工作的示例，检查此jsbin 。

I've got a tree layout. As shown in this JSBin http://jsbin.com/AbOmAZE/11/

On a click event on the text associated with a node, I would like the data behind the visualization to be updated (I need to update the data behind the tree layout, as it is used as an interface). I have the redraw and the click event already implemented, however I am not sure how to update the data just from knowing the current selection returned from the click function.

node.append("text")
  .text(function(d){ return d.name; })
  .on('click', function(d){
    var result = prompt('Change the name of the node',d.name)
    if(!result) {
      d.name = result; // !!! This is where the problem is.
    }
    console.log(d)
    draw(); //This redraws the graph
  }) 

Please refer to the JSBin posted above.

解决方案

After playing around with D3 for 2 months I finally understand exactly what I was confused about:

I was looking for a way to extract the data after it has been updated using d3.

This is fairly simple and involves two main steps:

1. Get the data array

   For this step you simply have to select the element you originally binded the data to using .data() - in this case it is the .nodes element

   var node = d3.select('svg').select('.nodes')

   Then you need to get the data using the .data() function. This returns an array for each node available. Since you want the data for the whole tree, select the node root by getting the data of the first item in the array with [0]

   var data = node.data()[0]

2. Filter the data

   Now we have the data, however running d3.tree(data) has added several attributes like 'x' and 'y' values. To get an array which resembles the one you originally put in you need a recursive filtering function:

   function filter(data) {
     for(var i in data){
       if(["depth","x","x0","y","y0","parent","size"].indexOf(i) != -1){
         delete data[i]; 
      } else if (i === "children") {
       for (var j in data.children) {
           data.children[j] = filter(data.children[j])
         }
        }  
      }
    return data;
   }
   

Now you have an array with the updated info as modified by d3, without any of the extra attributes d3 has added in the process. This array can now be saved back to the database.

Too see a fully working example, check out this jsbin.

这篇关于更新可视化背后的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！