javascript - 来自 json 的 D3 树布局

Question

我正在开发一个允许动态创建树的 d3 项目。

这正确地创建了树，但是如果我将树保存为 json 并重新加载它，然后添加一些节点，它会完全弄乱树结构。

json 结构看起来没问题，我去掉了 d3 添加到数据中的属性:

var json = JSON.stringify(treeData,function( key, value) {
                    if( key == 'parent') { return value.name;}
                    else if( key == 'depth') { return undefined;}
                    else if( key == 'x') { return undefined;}
                    else if( key == 'y') { return undefined;}
                    else {return value;}
                    });

看起来 d3 正在退出从深度 0 开始的节点。

请在此处查看 fiddle :http://jsfiddle.net/z15825qu/

Answer 1

问题出在这里:

var node = select.data(nodes, function(d) 
                        { 
                            if(d.Type!=="e"){
                                d.ExpVal=function(){return CalcEV(d);}();
                            }
                            return d.id || (d.id = ++self.i);//this is the problem 
                        });

让Id生成随机

var node = select.data(nodes, function(d) 
                        { 
                            if(d.Type!=="e"){
                                d.ExpVal=function(){return CalcEV(d);}();
                            }
                            return d.id || (d.id = parseInt(Math.random()*100)); //make the id generation random
                        });

原因:

当您第一次绘制它时，localStorage 没有存储任何数据，因此当您执行 ++self.i 时，id 生成是唯一的。

现在在本地存储有值并从那里渲染的情况下。 添加了一个节点，++self.i。将生成已经存在的节点的 ID(因为它将从 0 开始)。因此一切都会出错，因为您有多个具有相同 ID 的节点。

工作代码 here

希望这对您有所帮助!