Javascript 替换svg元素

我正在使用D3渲染一棵可折叠的树

（函数（）{
Ext.define（“d3.widgets.Treeview”{
扩展：“Ext.Panel”，
别名：“widget.d3_treeview”，
树：“”，
svg:“”，
持续时间：1000，
对角线：''，
i:0，
我：空，
构造函数：函数（配置）{
log（'1）树视图构造函数调用'）；
this.callParent（[config]）；
log（“Treeview-constructor FINISH”）；
我=这个；
},
initComponent:函数（）{
log（'2）树视图initComponent调用'）；
this.on（'afterRender'，function（）{
this.loadScript（this.onD3Loaded，this）；
}，这个）；
this.callParent（参数）；
},
/*afterRender:函数（）{
log（'4）树视图afterRender调用'）；
this.loadScript（this.onD3Loaded，this）；
返回this.callParent（参数）；
}, */
loadScript:函数（回调，作用域）{
log（'5）调用了loadScript'）；
Ext.Loader.injectScriptElement（'http://d3js.org/d3.v3.js，this.onLoad，this.onError，this）；
log（'Treeview-D3脚本加载'）；
},
onError:函数（）{
log（'Treeview On Error'）；
},
onload 1:函数（）{
log（'Treeview On onload 1'）；
},
onD3Loaded:函数（）{
log（'Treeview onD3Loaded-D3脚本加载回调'）；
},
onLoad:function（）{
log（'Tree View Store-------------------------------------------'）；
var data=[{“name”：“Orders”，“parent”：“}，
{“名称”：“订单号：ON57677”，“父项”：“订单”}，
{“名称”：“车辆编号：VN33255”，“父项”：“订单编号：ON57677”}，
{“名称”：“制造商：宝马”，“母公司”：“车辆编号：VN33255”}，
{“名称”：“型号：Z4”，“父项”：“车辆编号：VN33255”}，
{“名称”：“VIN:52465236”，“父项”：“车辆编号：VN33255”}，
{“名称”：“车辆编号：VN22345”，“母公司”：“订单编号：ON57677”}，
{“名称”：“品牌：雪佛兰”，“母公司”：“车辆编号：VN22345”}，
{“名称”：“型号：SS 454”，“母公司”：“车辆编号：VN22345”}，
{“名称”：“VIN:32659852”，“父项”：“车辆编号：VN22345”}，
{“名称”：“车辆编号：VN11234”，“父项”：“订单编号：ON57677”}，
{“名称”：“制造商：福特”，“母公司”：“车辆编号：VN11234”}，
{“名称”：“车型：嘉年华”，“母公司”：“车辆编号：VN11234”}，
{“名称”：“VIN:45218569”，“父项”：“车辆编号：VN11234”}]；
var dataMap=data.reduce（函数（映射，节点）{
map[node.name]=节点；
返回图；
}, {});
log（'dataMap--'+dataMap）；
var treeData=[]；
data.forEach（函数（节点）{
//添加到父级
var parent=dataMap[node.parent]；
如果（家长）{
//如果子数组不存在，则创建它
（parent.children | |（parent.children=[]））
//将节点添加到子数组
.推送（节点）；
}否则{
//父项为null或缺少
树数据推送（节点）；
}
});
log（'treeData--'+treeData）；
//*************生成树形图*****************
var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=960-margin.right-margin.left，
高度=500-margin.top-margin.bottom；
//var i=0；
i=0；
//var持续时间=1000；
持续时间=1000；
//var tree=d3.layout.tree（）
tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
//var diagonal=d3.svg.diagonal（）
对角线=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
d3.选择（“#treesvg”）.remove（）；
svg=d3。选择（“树”）。追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“id”，“treesvg”）；
根=树数据[0]；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
},
更新：函数（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.打开（“单击”，功能（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
});
       d3.select("#treesvg").remove();
       svg = d3.select("#tree").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("id","treesvg");

       svg = d3.select("#tree").selectAll("svg")
            .data([treedata]);

       svg.enter()
            .append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("id","treesvg");