D3树布局从json

D3 tree layout from json

本文关键字：json 布局 D3      更新时间：2023-09-26

我正在做一个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开始退出节点。

请参阅此处:http://jsfiddle.net/z15825qu/

问题在这里:

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没有数据存储，所以id生成是唯一的，当你做++self.i。

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

这里的工作代码

希望这对你有帮助!

相关文章：