更新可视化背后的数据

Question

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

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

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 
    }) 

请参考上面发布的JSBin。

Answer 1

与D3玩弄2个月后，我终于明白，正是我感到困惑：

我一直在寻找一种方式，它一直使用D3更新后提取数据。

这是相当简单，包括两个主要步骤：

1. 获取数据阵列

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

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

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

   var data = node.data()[0]

2. 滤波器阵列中的数据

   现在选择的节点根我们有数据，但是运行d3.tree（数据）已经添加了一些属性，如'x'和'y'值。为了得到它类似于您最初放在你的人需要一个递归滤波功能的阵列：

   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; 
   } 
   

现在你有一个更新的信息数组由D3作为修饰，没有任何额外的属性d3已经加入了这个过程。现在可以将该数组保存回数据库。

也希望看到一个完全工作的例子，check out this jsbin。

Answer 2

的问题是，你试图redraw树视图。 d3的enter，update和exit选择照顾变化的基础数据。我修改了jsbin here，并相应地更新了节点。

node.append("text") 
    .text(function(d){ return d.name; }) 
    .on('click', function(d){ 
    console.log(d); 
    var result = prompt('Change the name of the node',d.name); 
    if(result) { 
     d.name = result; 
     var node = canvas.selectAll('.node').data(nodes); 
     node.select('text') 
     .text(function(d){ return d.name; }); 
    } 
    });